hammer.js -需要默认缩放行为+滑动

Question

我想让用户在图像上滑动时，根据滑动的方向，转到上一张或下一张图片。这部分工作得很好，但它取消了放大图像的功能。根据this answer的说法，解决方案是启用touchAction: 'auto'，但这会完全破坏hammer.js，使其根本无法为swipe工作。

代码：

<script src="../js/hammer.min.js"></script>
<script>
$('.imagecontainer').each(function(){
  var options = {
    touchAction: 'auto',
  };
  var mc = new Hammer(this, options);

  mc.on("swipeleft", function() {
    navTo('jsnavnext');
    return false;
  });
  mc.on("swiperight", function() {
    navTo('jsnavprev');
    return false;
  });
});
</script>

我可以在touchAction: 'pan-y'中以最不友好的方式实现收缩缩放(基本上需要用户做一个奇怪的圆周运动)，但那是not...great。理想情况下，我希望hammer.js只添加滑动导航，而不接触任何其他默认行为。

Answer 1

我也遇到过类似的问题。我希望能够检测div上的滑动，并且能够在div上收缩缩放。swipe监听程序似乎单独禁用了缩放。添加touchAction:'auto'可以让我抓取缩放，但它显示会触发我的滑动操作和滚动(我不想让它滚动，只想触发滑动操作)。我这里的解决方案的关键部分是使用recognizeWith，然后在panstart和panmove上调用preventDefault。这就只剩下我想要的收缩、缩放和滑动了

这是我的解决方案：

  var target = document.getElementById("target-div")
  var mc = new Hammer(target, {touchAction: 'auto' });

  mc.add( new Hammer.Pan({
    direction: Hammer.DIRECTION_ALL,
    threshold: 0 }) );

  mc.add(new Hammer.Swipe({
    direction: Hammer.DIRECTION_ALL,
    threshold: 1,
    velocity:0.1
  })).recognizeWith(mc.get('pan'));

  mc.on('panstart panmove', function(ev) { ev.preventDefault(); });

  mc.get('pinch').set({ enable: true });

  mc.on("pinch", function(ev) {
  //do anything you need to here, or not 
  });

  mc.on("swipeleft", function(ev) {
  //do something
  }

  mc.on("swiperight", function(ev) {
  //do something
  }

我对hammer.js还很陌生，但我注意到github上有很多问题，人们试图在同一元素上组合多个手势。我希望这能帮到你!