web移动前端页面，jquery判断页面滑动方向

最新推荐文章于 2018-10-31 09:41:09 发布

转载最新推荐文章于 2018-10-31 09:41:09 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mmykdbc/p/9842744.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种使用JavaScript在触摸屏设备上判断用户滑动方向的方法。通过监听touchstart和touchmove事件，获取触点的起始和结束位置，进而计算滑动距离并判断滑动方向。该方法区分了上下左右四个滑动方向，适用于移动应用或网页的触摸交互设计。

/*判断上下滑动：*/
$('body').bind('touchstart',function(e){
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$("body").bind("touchmove",function(e){
//获取滑动屏幕时的X,Y
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX-startX;
distanceY = endY-startY;
//判断滑动方向
if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>0){
console.log('往右滑动');
}else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<0){
console.log('往左滑动');
}else
if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
console.log('往上滑动');
} else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
console.log('往下滑动');

}