判断左右滑的逻辑很简单,稍微改一下也能判断上下滑动

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

更多推荐