添加两个事件(手指按下时,手指松开时)
代码语言:javascript复制bindtouchstart="touchStart" //开始
bindtouchend="touchEnd"//结束
wxml
代码语言:javascript复制<view bindtouchstart="touchStart" bindtouchend="touchEnd" ></view>
wjs:首先在data下添加
代码语言:javascript复制 data: {
touchDotX:0,//X按下时坐标
touchDotY:0,//y按下时坐标
interval:null,//计时器
time:0,//从按下到松开共多少时间*100
},
然后添加对应的方法在
代码语言:javascript复制// 触摸开始事件
touchStart: function(e) {
this.setData({
touchDotX: e.touches[0].pageX // 获取触摸时的原点
})
this.setData({
touchDotY: e.touches[0].pageY // 获取触摸时的原点
})
this.setData({
interval: setInterval(() => {
this.setData({
time: this.data.time // 获取触摸时的原点
})
}, 100)
})
},
// 触摸结束事件
touchEnd: function(e) {
let touchDotX = this.data.touchDotX;//X按下时坐标
let touchDotY = this.data.touchDotY;//y按下时坐标
let touchMoveX = e.changedTouches[0].pageX;
let touchMoveY = e.changedTouches[0].pageY;
let tmX = touchMoveX - touchDotX;
let tmY = touchMoveY - touchDotY;
if (this.data.time < 20) {
let absX = Math.abs(tmX);
let absY = Math.abs(tmY);
if (absX > 2 * absY) {
if (tmX<0){
console.log("左滑=====")
}else{
this.bindBack();
console.log("右滑=====")
}
}
if (absY > absX * 2 && tmY<0) {
console.log("上滑动=====")
}
}
clearInterval(this.data.interval); // 清除setInterval
this.setData({
time: 0
})
},