基于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>