判断左右滑的逻辑很简单,稍微改一下也能判断上下滑动
1.在盒子里分别定义手指按下离开事件
<view @touchstart="touchStart" @touchend="touchEnd"></view>
2.定义变量,按下时间,开始位置,结束位置
startTime: 0,
startPosition: 0,
endPosition: 0
3.结束所在位置 - 按下时所在位置 = 滑动的距离
// 起点
touchStart(event) {
this.startTime = Date.now()
this.startPosition = event.changedTouches[0].clientX
},
// 终点,计算移动距离
touchEnd(event) {
const endTime = Date.now()
if (endTime - this.startTime > 2000) {
return;
}
this.endPosition = event.changedTouches[0].clientX
//当移动距离超过10时判断左滑右滑。
if (Math.abs(this.endPosition - this.startPosition) > 10) {
this.endPosition = event.changedTouches[0].clientX
var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
} else {
return;
}
console.log(elePosition)
}