微信小程序系列 -- 触摸滑动事件

以你之姓@ 2022-04-03 16:56 2230阅读 0赞

微信小程序通过三个事件共同作用实现了触摸滑动事件，即 `bingtouchstart`、`bindtouchmove` 和 `bindtouchend` 事件。

### WXML： ###

### 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 轴方向的滑动长度，来判断上滑或是下滑，由此实现触摸滑动的功能。

**更多信息联系我的微信公众号 「大学IT圈」**  
![在这里插入图片描述][20181223194235138.jpg]

[20181223194235138.jpg]: /images/20220403/0d1ee1682597445f8896f76d6c6eab72.png