基于Vue3 的 h5监听从左到右手滑返回上一页

App.vue 监听触摸事件 touchstart和 touchend；

<template>
  <div @touchstart="handleTouchStart" @touchend="handleTouchEnd">
    <router-view></router-view>
  </div>
</template>

代码 16 - 27 行，计算滑动值，大于 threshold 阈值就返回上一页；

<script setup>
import { ref } from "vue";

// 初始X坐标
let startX = ref(0);
// 结束X坐标
let endX  = ref(0);

// touch 开始
function handleTouchStart(event) {
  // 获取触摸开始的X坐标
  startX.value = event.touches[0].clientX; 
}

// touch 结束
function handleTouchEnd(event) {
  // 阈值，滑动距离超过这个值才考虑为有效滑动。可根据各自的设备修改
  const threshold = 70;
  // 获取触摸结束的X坐标
  endX.value = event.changedTouches[0].clientX; 
   // 计算滑动距离
  const deltaX = endX.value - startX.value; 
  if (deltaX > threshold) {
    // 向左滑动，返回上一页
    history.back(); // 返回上一页
  }
}
</script>