Hammer.js中的垂直滑动

Question

我正在使用hammer.js来重置计时器，当用户在他们的触摸设备上执行操作时。 这对于轻触、按压和水平滑动可以正常工作，但是如何让它识别垂直滑动呢？

$(function () { 
    var page = document.getElementById("parent"); 

    Hammer(page).on("swipe", function () { 
        idleTime = 0; 
    }); 

    Hammer(page).on("tap", function () { 
        idleTime = 0; 
    }); 

    Hammer(page).on("press", function () { 
       idleTime = 0; 
    }); 

}) 

- Gemma Jones

Answer 1

Swipe指的是任意方向的滑动。

使用swipeleft和swiperight来进行水平方向的滑动，使用swipeup和swipedown来进行垂直方向的滑动。

  $(function () { 
   var element = document.getElementById("parent"); 
   var mc = new Hammer(element);
   mc.get('swipe').set({ direction: Hammer.DIRECTION_ALL });

   mc.on("swipeleft", function () { 
    alert('swipeleft');
   }); 
          
           mc.on("swiperight", function () { 
    alert('swiperight');
   });
   
   mc.on("swipeup", function () { 
    alert('swipeup');
   }); 
   
   mc.on("swipedown", function () { 
    alert('swipedown');
   });
          
  }) 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<div id="parent" style="width:100%;height:500px;background:#ff0000;"></div>

- Vince

---

我已经尝试了swipeup和swipedown，但它们不起作用？ - Gemma Jones

是的，您需要激活垂直滑动，因为默认情况下它是禁用的 hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });。更多信息请参见：http://hammerjs.github.io/getting-started/。 - Vince

我该如何在我的代码中实现这个问题？我需要将页面变量分配给它吗？（抱歉，我是新手）。 - Gemma Jones

谢谢，这个很好用。唯一的问题是，在滑动父级div时，它不允许我上下滚动。当在这个特定的div上滑动时，屏幕就保持静止。 - Gemma Jones

使用版本2.0.1代替2.0.8似乎已经解决了滚动问题。非常感谢您的帮助。 - Gemma Jones