微信小程序监听手机系统自带的左右滑动返回事件

她超甜i2024-06-28 8:03

微信小程序返回的时候想直接返回首页，但是左滑是上一页，和navigateBack一样，所以就监听了一下，后来一想在页面卸载的时候也可以，还可以使用getCurrentPages（）方法，拿到是一个数组，官方文档

html 复制代码

<view class="container" bindtouchmove="handleTouchMove">
  <!-- 页面内容 -->
</view>

js 复制代码

Page({
  data: {
    startX: 0, // 记录触摸开始时的X坐标
    endX: 0,  // 记录触摸结束时的X坐标
  },

  handleTouchMove: function(e) {
    if (e.touches.length == 1) {
      // 单指触摸，记录坐标
      var touch = e.touches[0];
      this.setData({
        endX: touch.clientX,
      });

      // 判断是否滑动到足够距离（例如10px），并且判断是左滑还是右滑
      if (Math.abs(this.data.endX - this.data.startX) > 10) {
        if (this.data.endX < this.data.startX) {
          console.log('右滑');
        } else {
          console.log('左滑');
        }
        // 重置起始坐标，以便进行下一次判断
        this.setData({
          startX: this.data.endX,
          endX: 0,
        });
      }
    }
  },

  // 你可以在这里添加触摸开始的事件处理，以记录起始坐标
  handleTouchStart: function(e) {
    if (e.touches.length == 1) {
      var touch = e.touches[0];
      this.setData({
        startX: touch.clientX,
        endX: 0,
      });
    }
  },

  // ... 其他页面逻辑
});

需要添加更多的逻辑来处理边界情况（如多点触摸、滑动距离的判断阈值等）。同时，由于触摸事件的频繁触发，可能还需要考虑性能优化和防抖/节流等技术。大致监听然后返回首页的。有好的建议可以留言。

还有一种办法就是直接在卸载页面onunload里面直接写跳转页面的方法.