JS实现移动端判断上拉和下滑功能
一、手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。
二、js中距离：pageY、clientY、offsetY的区别：
offsetY:相对于父节点的偏移距离。
clientY:相对于浏览器，滚轮距离不算在内。
pageY:相对于浏览器，滚轮滚动的距离算在内；本例中，用pageY，触屏时记录位置-startY，结束时记录-endY，两个相减以正负判断是上移还是下滑。
三、touchstart有touches属性，touchend有changedTouches属性，两个属性中分别有pageY、pageX信息。
//滑动处理
varstartX,startY;
document.addEventListener('touchstart',function(ev){
startX=ev.touches[0].pageX;
startY=ev.touches[0].pageY;
},false);
document.addEventListener('touchend',function(ev){
varendX,endY;
endX=ev.changedTouches[0].pageX;
endY=ev.changedTouches[0].pageY;
vardirection=GetSlideDirection(startX,startY,endX,endY);
switch(direction){
case0:
alert("无操作");
break;
case1:
//向上
alert("up");
break;
case2:
//向下
alert("down");
break;
default:
}
},false);
四、
functionGetSlideDirection(startX,startY,endX,endY){
vardy=startY-endY;
//vardx=endX-startX;
varresult=0;
if(dy>0){//向上滑动
result=1;
}elseif(dy<0){//向下滑动
result=2;
}
else
{
result=0;
}
returnresult;
}
总结
以上所述是小编给大家介绍的JS实现移动端判断上拉和下滑功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！