微信小程序“搖一搖”的實(shí)例代碼
微信小程序并沒有提供搖一搖API接口,但是提供了一個重力感應(yīng)的API 「wx.onAccelerometerChange(CALLBACK)」,我們可以用這個方法來模擬微信搖一搖功能,代碼如下:
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的話,這樣啟用重力感應(yīng)API會使tabbar下面所有頁面都會監(jiān)聽到重力感應(yīng)數(shù)據(jù),導(dǎo)致模擬搖一搖在所有頁面都能出現(xiàn)搖一搖的結(jié)果,這并不是我們想要的,我們只是想在tabbar下其中一個頁面允許他獲取到重力感應(yīng)數(shù)據(jù),那么就需要我們自己加入一個是否在當(dāng)前頁面的判斷,根據(jù)判斷結(jié)果來啟用監(jiān)聽重力感應(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í)例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
Bootstrap CSS組件之面包屑導(dǎo)航(breadcrumb)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之面包屑導(dǎo)航(breadcrumb),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12淺析Javascript中雙等號(==)隱性轉(zhuǎn)換機(jī)制
這篇文章給大家詳細(xì)介紹了javascript中雙等號(==)隱性轉(zhuǎn)換機(jī)制,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-10-10web性能優(yōu)化之javascript性能調(diào)優(yōu)
本文詳細(xì)介紹Web 開發(fā)中關(guān)于性能方面需要注意的一些小細(xì)節(jié),從 JavaScript 本身著手,介紹了 JavaScript 中需要避免的一些函數(shù)的使用和編程規(guī)則,比如 eval 的弊端,function scope chain 以及 String 的用法等等2012-12-12javascript canvas實(shí)現(xiàn)簡易時鐘例子
這篇文章主要為大家詳細(xì)介紹了javascript canvas實(shí)現(xiàn)簡易時鐘例子,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-09-09