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

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

相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
智慧地球(AI·Earth)3 天前
给AI配一台手机+电脑?智谱AutoGLM上线!
人工智能·智能手机·电脑
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
xiaocao_10233 天前
怎么在手机上选择一款好用的桌面待办清单工具
智能手机·待办工具
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode