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