微信小程序“摇一摇”的实例代码
更新时间：2017年07月20日 09:17:38 作者：happycxz
微信小程序并没有提供摇一摇API接口，但是提供了一个重力感应的API，接下来我们可以用这个方法来模拟微信摇一摇功能，具体实现代码，大家参考下本文
微信小程序并没有提供摇一摇API接口，但是提供了一个重力感应的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的话，这样启用重力感应API会使tabbar下面所有页面都会监听到重力感应数据，导致模拟摇一摇在所有页面都能出现摇一摇的结果，这并不是我们想要的，我们只是想在tabbar下其中一个页面允许他获取到重力感应数据，那么就需要我们自己加入一个是否在当前页面的判断，根据判断结果来启用监听重力感应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;
}
})
修改以后重新编译预览就达到我们想要的效果了。
总结
以上所述是小编给大家介绍的微信小程序“摇一摇”的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了Bootstrap3 Grid system原理及应用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了bootstarp modal框居中显示的实现代码,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了用Fundebug插件记录网络请求异常的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
今天小编就为大家分享一篇关于JSON字符串操作移除空串更改key/value的介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
下面小编就为大家带来一篇JS实现控制文本框的内容。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。下面通过本文给大家介绍js面向对象知识，包括面向对象的两个基本概念，一起看看吧2017-06-06
BigInt是ES2020中引入的新的原始数据类型。它允许程序员使用更大的整数值，以匹配需要处理的数据集。在这篇博客中，我们将探讨BigInt的用法和它与其他相似方法的区别，感兴趣的可以了解一下2023-04-04
本文主要介绍了微信小程序开发之全局配置与页面配置实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了JavaScript微信定位功能实现方法,将定位到的经纬度转换为百度地图对应的经纬度，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了全面解析Bootstrap图片轮播效果，Bootstrap提供了carousel插件，实现图片轮播非常方便，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
最新评论