作者:斑驳光影,来自授权地址
由于微信小程序只能够支持 tap,longtap,touchstart,touchmove,touchcancel,touchend时间,对于比较复杂的事件只能自己实现
使用由于和微信小程序强绑定,因此需要在元素上面绑定好所有的事件,书写比较麻烦,因此建议对于原生支持的使用原生去解决,只有当需要 pinch,rotate,swipe 等特殊事件才使用这个事件库实现
绑定方法 *.wxml
在wxml中对需要监听时间的元素绑定 touchstart、touchmove、touchend、touchcancel四个事件 <view class="info-list" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" > </view> *.js
在js逻辑层需要实例化WxTouchEvent, 实例中有start、move、end、cancel对应\*.wxml绑定的bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,需要将事件的回调函数一一对应, import WxTouchEvent from "wx-touch-event"; let infoListTouchEvent = new WxTouchEvent();//在 Page外实例化函数,可以直接复制给 Page 中的回调函数 Page({ onLoad: function() { this.infoListTouchEvent = infoListTouchEvent; this.infoListTouchEvent.bind({//初始化后绑定事件 swipe: function(e) { console.log(e); }, doubleTap: function(e) { console.log(e); }, tap: function(e) { console.log(e); }.bind(this), longTap: function(e) { console.log(e); }, rotate: function(e) { console.log(e) }.bind(this), pinch: function(e) { console.log(e); } }) }, touchStart: infoListTouchEvent.start.bind(infoListTouchEvent), touchMove: infoListTouchEvent.move.bind(infoListTouchEvent), touchEnd: infoListTouchEvent.end.bind(infoListTouchEvent), touchCancel: infoListTouchEvent.cancel.bind(infoListTouchEvent), }); |
WxTouchEvent 微信小程序手势事件库
发布:2018-04-18 09:50浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08