手机端左滑不返回上一页

Question

我的Vue3+ts项目在电脑上可以前进后退，在手机端左滑不返回上一页而是直接退出了网站请问怎么修改呀？

Answer 1

引自免费微信小程序：皆我百晓生

要解决手机端左滑导致直接退出而非返回上一页的问题，我们可以采取以下步骤：

1. 监听touch事件：首先，我们需要在Vue应用中监听touch事件，以便检测用户的左滑动作。

2. 阻止默认行为：当检测到左滑时，我们需要阻止浏览器的默认行为，即防止它直接退出应用。

3. 模拟页面后退：然后，我们可以通过调用history.back()方法来模拟页面的后退行为。

具体实现如下：

1. 在main.ts文件中添加全局事件监听器

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.globalProperties.$touchStartX = 0;
app.config.globalProperties.$touchEndX = 0;

app.directive('swipe', {
  mounted(el) {
    el.addEventListener('touchstart', (event) => {
      // 记录触摸开始的位置
      this.$touchStartX = event.touches[0].clientX;
    });

    el.addEventListener('touchend', (event) => {
      // 触摸结束时，检查左右滑动
      this.$touchEndX = event.changedTouches[0].clientX;
      const deltaX = this.$touchStartX - this.$touchEndX;

      if (deltaX > 100) {
        // 左滑，执行后退操作
        history.back();
      }
    });
  },
});

2. 在需要监听左滑的组件上使用自定义指令

<template>
  <div v-swipe>
    <!-- 页面内容 -->
  </div>
</template>

注意事项：

• 上述代码示例中，我们使用了一个自定义的Vue指令v-swipe来监听和处理触控事件。这样做的好处是保持了代码的整洁，并且可以方便地在任何需要监听滑动手势的组件上使用。
• 我们通过$touchStartX和$touchEndX来跟踪触摸开始和结束时的X坐标，从而计算出左右滑动的距离。如果deltaX（结束位置与开始位置的差值）大于设定的阈值（例如100像素），则认为是左滑手势，此时调用history.back()来模拟页面后退。

这种方法应该能有效解决你在手机端遇到的左滑直接退出的问题，而改为执行页面后退操作。如果在实际应用中遇到其他问题，可能需要根据具体情况进行调整。