search

Home  >  Q&A  >  body text

javascript - 如何用原生JS&&jQuery&&Vue.js判断手机的滑动?

虽然项目没有要求,但自己不想再引入其他的插件。
需求很简单,能判断上下左右的滑动事件即可。
目前的环境是原生JS+Vue.js+jQuery1.8
如何解决这个问题呢?求解!

高洛峰高洛峰2790 days ago732

reply all(2)I'll reply

  • PHP中文网

    PHP中文网2017-04-11 11:09:07

    已使用touchstart,touchend解决

    (function(){
        var currentPage = 0;
        var direction = function(up, down){
            var YStack = [];
            document.body.addEventListener('touchstart',function(e){
                YStack.length = 0;
                YStack.push(e.touches[0].clientY);
            },false);
            document.body.addEventListener('touchend',function(e){
               YStack.push(e.changedTouches[0].clientY);
               YStack[1]-YStack[0] >= 100?down():void 0;
               YStack[1]-YStack[0] <= -100?up():void 0;
            },false);
        }
        var scrollUp = function(){
           if(currentPage<=3){
               currentPage++;
               $('p#wrapper').css({'top':-currentPage+'00%'});
           }
        }
        var scrollDown = function(){
          if(currentPage>=1){
              currentPage--;
              $('p#wrapper').css({'top':-currentPage+'00%'});
          }
        }
        direction(scrollUp,scrollDown);
    })();

    reply
    0
  • 迷茫

    迷茫2017-04-11 11:09:07

    可以看看 touchstart、touchmove、touchend 事件的组合。

    reply
    0
  • Cancelreply