作者:斑驳光影,来自授权地址
由于微信小程序只能够支持 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), }); |