微信小程序 检测手势 左滑 右滑

wxml

<!--pages/test/test.wxml-->
<view class="container" style="height:{{containerHeight}}px" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
  嘎嘎嘎嘎
</view>

js

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    startX: 0, // 初始触摸点的X坐标
    startY: 0, // 初始触摸点的Y坐标
    endX: 0, // 结束触摸点的X坐标
    endY: 0, // 结束触摸点的Y坐标
    containerHeight: wx.getSystemInfoSync().windowHeight,
  },
  touchStart(e) {
    this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY
    });
  },

  touchMove(e) {
    this.setData({
      endX: e.changedTouches[0].clientX,
      endY: e.changedTouches[0].clientY
    });
  },

  touchEnd() {
    const {
      startX,
      endX,
      startY,
      endY
    } = this.data;
    const deltaX = endX - startX;
    const deltaY = endY - startY;

    if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
      if (deltaX > 0) {
        // 右滑
      } else {
        // 左滑
      }
    }
    // 清空 startX、endX、startY 和 endY
    this.setData({
      startX: 0,
      endX: 0,
      startY: 0,
      endY: 0
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

这个稳