微信小程序通过三个事件共同作用实现了触摸滑动事件,即 bingtouchstart、bindtouchmove 和 bindtouchend 事件。
WXML:
view class='btn' bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'OK/viewJS:
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 轴方向的滑动长度,来判断上滑或是下滑,由此实现触摸滑动的功能。
更多信息联系我的微信公众号 「大学IT圈」













