微信小程序“搖一搖”的實(shí)例代碼
微信小程序并沒(méi)有提供搖一搖API接口，但是提供了一個(gè)重力感應(yīng)的API 「wx.onAccelerometerChange(CALLBACK)」，我們可以用這個(gè)方法來(lái)模擬微信搖一搖功能，代碼如下：
Page({
onShow: function () {
wx.onAccelerometerChange(function (e) {
console.log(e.x)
console.log(e.y)
console.log(e.z)
if (e.x > 1 && e.y > 1) {
wx.showToast({
title: '搖一搖成功',
icon: 'success',
duration: 2000
})
}
})
},
onHide: function(){
}
})
但如果小程序需要啟用tabbar的話(huà)，這樣啟用重力感應(yīng)API會(huì)使tabbar下面所有頁(yè)面都會(huì)監(jiān)聽(tīng)到重力感應(yīng)數(shù)據(jù)，導(dǎo)致模擬搖一搖在所有頁(yè)面都能出現(xiàn)搖一搖的結(jié)果，這并不是我們想要的，我們只是想在tabbar下其中一個(gè)頁(yè)面允許他獲取到重力感應(yīng)數(shù)據(jù)，那么就需要我們自己加入一個(gè)是否在當(dāng)前頁(yè)面的判斷，根據(jù)判斷結(jié)果來(lái)啟用監(jiān)聽(tīng)重力感應(yīng)API，代碼修改如下：
Page({
isShow: false,
onShow: function () {
var that = this;
this.isShow = true;
wx.onAccelerometerChange(function (e) {
if(!that.isShow){
return
}
console.log(e.x)
console.log(e.y)
console.log(e.z)
if (e.x > 1 && e.y > 1) {
wx.showToast({
title: '搖一搖成功',
icon: 'success',
duration: 2000
})
}
})
},
onHide: function(){
this.isShow = false;
}
})
修改以后重新編譯預(yù)覽就達(dá)到我們想要的效果了。
總結(jié)
以上所述是小編給大家介紹的微信小程序“搖一搖”的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Bootstrap3 Grid system原理及應(yīng)用詳解
這篇文章主要為大家詳細(xì)介紹了Bootstrap3 Grid system原理及應(yīng)用,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
bootstarp modal框居中顯示的實(shí)現(xiàn)代碼
這篇文章主要介紹了bootstarp modal框居中顯示的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02
用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
今天小編就為大家分享一篇關(guān)于JSON字符串操作移除空串更改key/value的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
下面小編就為大家?guī)?lái)一篇JS實(shí)現(xiàn)控制文本框的內(nèi)容。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
JavaScript之面向?qū)ο骭動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript的面向?qū)ο缶幊毯痛蠖鄶?shù)其他語(yǔ)言如Java、C#的面向?qū)ο缶幊潭疾惶粯印Ｏ旅嫱ㄟ^(guò)本文給大家介紹js面向?qū)ο笾R(shí)，包括面向?qū)ο蟮膬蓚€(gè)基本概念，一起看看吧2017-06-06
BigInt是ES2020中引入的新的原始數(shù)據(jù)類(lèi)型。它允許程序員使用更大的整數(shù)值，以匹配需要處理的數(shù)據(jù)集。在這篇博客中，我們將探討B(tài)igInt的用法和它與其他相似方法的區(qū)別，感興趣的可以了解一下2023-04-04
微信小程序開(kāi)發(fā)之全局配置與頁(yè)面配置實(shí)現(xiàn)
本文主要介紹了微信小程序開(kāi)發(fā)之全局配置與頁(yè)面配置實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
JavaScript微信定位功能實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript微信定位功能實(shí)現(xiàn)方法,將定位到的經(jīng)緯度轉(zhuǎn)換為百度地圖對(duì)應(yīng)的經(jīng)緯度，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了全面解析Bootstrap圖片輪播效果，Bootstrap提供了carousel插件，實(shí)現(xiàn)圖片輪播非常方便，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01