微信小程序监听手指滑动事件

微信小程序，监听手指滑动事件

1.wxml 对监听区域加监听事件

<view class="contentContainer" bindtouchmove="handletouchmove" bindtouchstart="handletouchstart" bindtouchend="handletouchend">
  <text>操作区域</text>
</view>

2.js

handletouchmove: function(event) {
    console.log('监听滑动') 
  },
 
  handletouchstart:function(event) {
    this.data.lastX = event.touches[0].pageX;
    this.data.lastY = event.touches[0].pageY;
  },
  handletouchend:function(event) {
    let currentX = event.changedTouches[0].pageX;
    let currentY = event.changedTouches[0].pageY;
    let tx = currentX - this.data.lastX;
    let ty = currentY - this.data.lastY;

    //左右方向滑动
    if (Math.abs(tx) > Math.abs(ty)) {
      if (tx < 0) {
        // 向左滑动
        console.log('向左滑动')
      }
      else if (tx > 0) {
        // 向右滑动
        console.log('向右滑动')
      }
 
    }
    //上下方向滑动
    else {
      if (ty < 0){
        console.log('向上滑动')
        this.data.flag= 3
 
      }
      else if (ty > 0) {
        console.log('向下滑动')
        this.data.flag= 4
      }
 
    }
  }