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

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

<view class="container" bindtouchmove="handleTouchMove">
  <!-- 页面内容 -->
</view>
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里面直接写跳转页面的方法.

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好苦呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值