移动端判断用户滑动方向

Posted ylp0617

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端判断用户滑动方向相关的知识,希望对你有一定的参考价值。

思路:

    (1)获取用户的滑动手指初始坐标

    (2)获取用户滑动结束时的手指坐标

    (3)比较x,y方向上的绝对值,用于判断滑动方向是左右还是上下

    (4)最后实际判断具体方向

/*注意touchstart , touthmove 中 坐标存放在e.targetTouches[0]*/
/* touchend 中 坐标存放在 e.changedTouches[0] */
var firstX = 0,firstY = 0,endX = 0,endY = 0;//初始化坐标值
window.addEventListener("touchstart",function(e){
	firstX = e.targetTouches[0].clientX;
	firstY = e.targetTouches[0].clientY;
})
window.addEventListener("touchend",function(e){
	endX = e.changedTouches[0].clientX;
	endY = e.changedTouches[0].clientY;
	moveX = endX - firstX;//判断左右
	moveY = endY - firstY;//判断上下
	if(Math.abs(moveX) > 60 || Math.abs(moveY) > 60){//判断是滑动,不是点击
		if(Math.abs(moveX) > Math.abs(moveY))){
			/*判断横向移动的距离和纵向移动的距离大小对比,判断是左右还是上下*/
			var ele = moveX > 0 ? "向右" : "向左";
			alert(ele);
		}else{
			var ele = moveY > 0 ? "向下" : "向上";
			alert(ele);
		}
	}
})

  

以上是关于移动端判断用户滑动方向的主要内容,如果未能解决你的问题,请参考以下文章

移动端 uni-app 滑动事件 精确判断手指滑动方向

移动端滑动方向判断

PC和移动端判断鼠标(手指)滑动方向(touch方向)

js判断元素滑动方向(上下左右)移动端

《移动端浏览器Touch事件判断手指滑动方向方法》

移动应用滑动屏幕方向判断解决方案,JS判断手势方向