1、在需要监测的盒子中添加事件(wxml)
<view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend="touchEnd">
2、在当前文件js中的data对象中声明两个数组(js/data)
touchS : [0,0],
touchE : [0,0],
3、事件监听
// 触摸开始事件
touchStart: function(e){
// console.log(e.touches[0].pageX)
let sx = e.touches[0].pageX
let sy = e.touches[0].pageY
this.data.touchS = [sx,sy]
},
// 触摸滑动事件
touchMove: function(e){
let sx = e.touches[0].pageX;
let sy = e.touches[0].pageY;
this.data.touchE = [sx, sy]
},
// 触摸结束事件
touchEnd: function(e){
console.log(e.currentTarget.dataset.index);
let start = this.data.touchS
let end = this.data.touchE
if(start[0] < end[0] - 50){
console.log('向右滑,这里可以调用方法,及页面跳转事件')
}else if(start[0] > end[0] + 50){
console.log('向左滑,这里可以调用方法,及页面跳转事件')
}else{
console.log('向上或向下滑动')
}
},