uniapp原生实现左右滑动切换tab
项目需要实现左右滑动进行tab切换,有组件可以实现 但是使用过成功有点bug，使用原生解决方法
多个tab对应的view根据current进行显示
在每个view上添加滑动开始结束事件监听
- touchstart
- touchend
定义数组startData存储开始滑动的坐标,开始滑动时存储
结束滑动时 根据当前坐标计算滑动的距离 自己定义无效滑动的区间 然后进行1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27<view class="sale-quantity-ranking" v-if="current==1" @touchstart="start" @touchend="end">
</view>
start(e){
this.startData.clientX=e.changedTouches[0].clientX;
this.startData.clientY=e.changedTouches[0].clientY;
},
end(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>100){
if(this.current > 0){
this.current = this.current-1
}
console.log('右滑')
}else if(subX<-100){
if(this.current < 4){
this.current = this.current+1
}
console.log('左滑')
}else{
console.log('无效')
}
}
},