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

微信小程序返回的时候想直接返回首页,但是左滑是上一页,和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里面直接写跳转页面的方法.

相关推荐
木风未来2 分钟前
解锁自然新可能:露营租赁小程序如何让轻量化户外触手可及
小程序
、我是男生。2 小时前
智能手机充电-大电压小电流与小电压大电流
智能手机
lauo3 小时前
【智体OS】ibbot智体机灵 V1.0:你的手机AI超脑,一句话开启智体时代————终将打败OpenClaw的国产开源项目
人工智能·智能手机
木风未来3 小时前
破解家政维修信任困局:一个小程序如何让家庭服务更透明、更高效
小程序
modem协议笔记5 小时前
3GPP R19 中redcap支持PC 2
网络·5g·智能手机
Java.慈祥5 小时前
速通-微信小程序 5Day
java·微信小程序·小程序·npm
说私域6 小时前
数字围城下的防御与突围:基于私域流量与智能名片商城小程序的用户关系重构研究
小程序·重构·流量运营·私域运营
灵狐数据FoxData6 小时前
2025全球应用下载类别洞察:游戏持续领跑,工具与内容类应用重塑全球需求
程序人生·智能手机·生活·业界资讯·娱乐·媒体
未来之窗软件服务7 小时前
服务器运维(三十四)小程序web访问慢ssl优化—东方仙盟
运维·服务器·小程序·仙盟创梦ide·东方仙盟
全栈小57 小时前
【小程序】微信小程序slice方法分割无效,单独输出一直为空,这是为什么呢
微信小程序·小程序·数组分割