WXML:
<view class='btn' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
OK
</view>
JS:
data: {
touchS : [0,0],
touchE : [0,0]
},
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){
let start = this.data.touchS
let end = this.data.touchE
console.log(start)
console.log(end)
if(start[0] <end[0] - 50){
console.log('右滑')
}else if(start[0] >end[0] + 50){
console.log('左滑')
}else{
console.log('静止')
}
},
在 touchstart 时,监听到触摸开始时的 (x, y)位置;在 touchMove 方法中持续监听触摸点的位置(x, y),并保存在 data 中;在 touchEnd 方法中对开始的触摸位置和结束的触摸位置进行判断,如果移动距离大于 50 则判定为发生触摸滑动事件。
在上面示例中,当 X 轴方向的移动超过 50 时即判定为左滑或右滑,相应的也可以通过判断 Y 轴方向的滑动长度,来判断上滑或是下滑,由此实现触摸滑动的功能。
更多信息联系我的微
微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件
touchend在触摸结束时触发事件
touchmove触摸的过程中不断激发这个事件
这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart =>touchmove=>touchmove =>··· =>touchmove =>touchend。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)