微信小程序“摇一摇”的实例代码


Posted in Javascript onJuly 20, 2017

微信小程序并没有提供摇一摇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;
  }
})

修改以后重新编译预览就达到我们想要的效果了。

总结

以上所述是小编给大家介绍的微信小程序“摇一摇”的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
JavaScript中的数学运算介绍
Dec 29 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
Apr 10 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
Vue自定义多选组件使用详解
Sep 08 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 #Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 #Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
详解Angular CLI + Electron 开发环境搭建
Jul 20 #Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 #Javascript
js 事件的传播机制(实例讲解)
Jul 20 #Javascript
详谈for循环里面的break和continue语句
Jul 20 #Javascript
You might like
PHP Ajax实现页面无刷新发表评论
2007/01/02 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php获取参数的几种方法总结
2014/02/18 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
Python实现线程池代码分享
2015/06/21 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python里字典的基本用法(包括嵌套字典)
2019/02/27 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
初中体育教学反思
2014/01/14 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
Python机器学习三大件之一numpy
2021/05/10 Python
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏