uniapp开发vue3监听右滑返回操作，返回到指定页面，解决边缘区域监听错误问题

想要在uniapp框架中监听左滑或者右滑手势，需要使用touchstart和touchend两个api，因为没有原生的左右滑监听api，所以我们只能依靠这两个api来获取滑动开始时候的x坐标和滑动结束后的x坐标做比对，右滑的话，结束时候的x坐标-开始的x坐标肯定是大于一定阈值的，比如大于50，我们就算它右滑了。

给元素绑定滑动事件：

监听滑动距离：

当滑动距离大于50，说明是右滑返回操作：处理自定义返回操作backHandle。

完成的代码：

    <view
        class="orderDetail"
        :style="{ paddingTop: contentTop }"
        @touchstart="touchStart"
        @touchend="touchEnd"
    >

    。。。

    </view>




    // 监听滑动距离
    // move x
    let startX = 0

    // 监听手势右滑事件
const touchStart = (event) => {
    console.log('touchStart', event)
    startX = event.touches[0].clientX
}

const touchEnd = (event) => {
    console.log('touchEnd', event)
    const endX = event.changedTouches[0].clientX
    console.log('move x :', endX)
    if (endX - startX > 50) {
        // 说明是右滑返回了，自定义滑动事件
        backHandle()
    }
}

遇到的问题

1.如果是在边缘区域触发滑动返回，则有可能会没有监听到touchend事件，所以就会导致右滑失败，只会触发touchstart事件。

2.还有手机原生的返回按钮，也要做相应的处理

解决办法：使用onUnload事件，官方文档：页面 | uni-app官网

不能使用onBackPress事件，因为不支持微信小程序

这个时候就只能使用onUnload事件了：

import { onLoad, onUnload } from '@dcloudio/uni-app'



onUnload(() => {
    console.log('返回按钮')
    自定义逻辑
})