JS实现移动端判断上拉和下滑功能

一、手指触屏，利用touchstart和touchend计算前后滑动距离，判断是上拉还是下滑。

二、js中距离：pageY、clientY、offsetY的区别：

       offsetY:相对于父节点的偏移距离。

       clientY:相对于浏览器，滚轮距离不算在内。

       pageY:相对于浏览器，滚轮滚动的距离算在内；本例中，用pageY，触屏时记录位置-startY，结束时记录-endY，两个相减以正负判断是上移还是下滑。 

三、touchstart有touches属性，touchend有changedTouches属性，两个属性中分别有pageY、pageX信息。

//滑动处理
   var startX, startY;
   document.addEventListener('touchstart',function (ev) {
     startX = ev.touches[0].pageX;
     startY = ev.touches[0].pageY;
   }, false);
   document.addEventListener('touchend',function (ev) {
     var endX, endY;
     endX = ev.changedTouches[0].pageX;
     endY = ev.changedTouches[0].pageY;
     var direction = GetSlideDirection(startX, startY, endX, endY);
     switch(direction) {
       case 0:
           alert("无操作");
         break;
       case 1:
         // 向上
         alert("up");
         break;
       case 2:
         // 向下
         alert("down");
         break;
default:
     }
   }, false);

四、

function GetSlideDirection(startX, startY, endX, endY) {
     var dy = startY - endY;
     //var dx = endX - startX;
     var result = 0;
     if(dy>0) {//向上滑动
       result=1;
     }else if(dy<0){//向下滑动
       result=2;
     }
     else
     {
       result=0;
     }
     return result;
   }

总结

以上所述是小编给大家介绍的JS实现移动端判断上拉和下滑功能，希望对大家有所帮助

来源：http://blog.csdn.net/zhengyanan110/article/details/76804730