1. 添加需要监听滑动事件的元素
在你的页面中，添加需要监听滑动事件的元素。这可以是一个 view、swiper 或其他组件，取决于你的需求。例如：
<template>
<view class="body" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
<!-- 页面内容 -->
</view>
</template>
2. 编写事件处理逻辑
在页面的 <script> 部分，编写事件处理逻辑。我们将使用 @touchstart 事件记录触摸起始点的横坐标，@touchmove 事件计算滑动距离，并根据距离判断滑动方向，最后使用 @touchend 事件清除触摸起始点的记录。
<script>
export default {
data() {
return {
startX: '', // 触摸起始点横坐标
};
},
methods: {
touchStart(event) {
// 记录触摸起始点的横坐标
this.startX = event.touches[0].clientX;
},
touchMove(event) {
// 计算滑动距离
const currentX = event.touches[0].clientX;
const deltaX = currentX - this.startX;
// 判断滑动方向
if (deltaX > 50) {
// 向右滑动逻辑 这里只建议写一些性能消耗小的逻辑，比如：this.status = !this.status 因为当他的横坐标大于或小于50时，每隔一个数字都会执行一次，所以...非常消化性能
console.log('向右滑动逻辑')
} else if (deltaX < -50) {
// 向左滑动逻辑 这里只建议写一些性能消耗小的逻辑，比如：this.status = !this.status 因为当他的横坐标大于或小于50时，每隔一个数字都会执行一次，所以...非常消化性能
console.log('向左滑动逻辑')
}
},
touchEnd() {
// 清除触摸起始点记录，这里也可以写一些比较复杂的逻辑，每滑动一次松后执行。
},
},
};
</script>
