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