uniapp实现页面左右滑动，上下滑动事件

<template>
<view>
<view>新手教学</view>
<u-overlay :show="show" >
<view class="guide-box" @touchstart="start" @touchend="end">
<view class="warp1">
<view class="box-width" @click="show = false">
点击左边区域查看上一份材料
</view>
</view>
<view class="warp2">
<view class="box-width" @click="show = false">
点击中间区域调出工具栏
</view>
</view>
<view class="warp3">
<view class="box-width" @click="show = false">
点击右边区域查看下一份材料
</view>
</view>
<view class="warp4">
<view class="" @click="show = false">
上滑下滑翻页
</view>
</view>
<view class="warp" >
<view class="rect" @click="show = false">
我知道了
</view>
</view>
</view>
</u-overlay>

</view>
</template>

<script>
export default {
data () {
return {
show: true, // 是否显示引导
startData:{
clientX:0,
clientY:0
}
}
},
methods: {
// 添加方法：

start(e){
this.startData.clientX=e.changedTouches[0].clientX;
this.startData.clientY=e.changedTouches[0].clientY;
},

end(e){
// console.log(e)
const subX=e.changedTouches[0].clientX-this.startData.clientX;
const subY=e.changedTouches[0].clientY-this.startData.clientY;
if(subY>50 || subY<-50){
console.log('上下滑')
}else{
if(subX>50){
console.log('右滑')
}else if(subX<-50){
console.log('左滑')
}else{
console.log('无效')
}
}
}
//50为有效区域
},
}
</script>

<style lang="less" scoped>
.guide-box{
width: 100%;
height: 100%;
font-size: 30rpx;
color: #fff;
}
.box-width{
width: 220rpx;
}
.warp {
position:absolute;
left:43%;
top: 800rpx;

}
.warp1{
position:absolute;
left:3%;
top: 500rpx;
}

.warp2{
position:absolute;
left:38%;
top: 500rpx;
font-size: 28rpx;
}
.warp3{
position:absolute;
left:70%;
top: 500rpx;
}
.warp4{
position:absolute;
left:40%;
top: 200rpx;
font-size: 28rpx;
}

</style>