uniapp 判断左滑右滑
·
判断左右滑的逻辑很简单,稍微改一下也能判断上下滑动
1.在盒子里分别定义手指按下离开事件
<view @touchstart="touchStart" @touchend="touchEnd"></view>
2.定义变量,按下时间,开始位置,结束位置
startTime: 0,
startPosition: 0,
endPosition: 0
3.结束所在位置 - 按下时所在位置 = 滑动的距离
上下滑动也触发了左右滑的问题,应该是因为左右移动判断距离10有点小了,实际上下滑的时候不是直上直下。
要求不高的话,直接把判断距离10改大一点就行。
要求高的话,可以把上下滑的距离也计算出来,如果上下滑的距离超过左右滑的距离,就不算左右滑,思路不固定。
// 起点
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)
}
更多推荐

所有评论(0)