添加两个事件(手指按下时,手指松开时)
bindtouchstart="touchStart" //开始
bindtouchend="touchEnd"//结束
wxml
<view bindtouchstart="touchStart" bindtouchend="touchEnd" ></view>
wjs:首先在data下添加
data: {
touchDotX:0,//X按下时坐标
touchDotY:0,//y按下时坐标
interval:null,//计时器
time:0,//从按下到松开共多少时间*100
},
然后添加对应的方法在
// 触摸开始事件
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
})
},
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有