|
作者:斑駁光影,來自授權(quán)地址
由于微信小程序只能夠支持 tap,longtap,touchstart,touchmove,touchcancel,touchend時間,對于比較復(fù)雜的事件只能自己實現(xiàn)
使用由于和微信小程序強綁定,因此需要在元素上面綁定好所有的事件,書寫比較麻煩,因此建議對于原生支持的使用原生去解決,只有當(dāng)需要 pinch,rotate,swipe 等特殊事件才使用這個事件庫實現(xiàn)
綁定方法 *.wxml
在wxml中對需要監(jiān)聽時間的元素綁定 touchstart、touchmove、touchend、touchcancel四個事件
<view class="info-list"
bindtouchstart="touchStart"
bindtouchmove="touchMove"
bindtouchend="touchEnd"
bindtouchcancel="touchCancel"
>
</view>
*.js
在js邏輯層需要實例化WxTouchEvent, 實例中有start、move、end、cancel對應(yīng)\*.wxml綁定的bindtouchstart,bindtouchmove,bindtouchend,bindtouchcancel,需要將事件的回調(diào)函數(shù)一一對應(yīng),
import WxTouchEvent from "wx-touch-event";
let infoListTouchEvent = new WxTouchEvent();//在 Page外實例化函數(shù),可以直接復(fù)制給 Page 中的回調(diào)函數(shù)
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),
});
|