Question

我们的网站上有一个以我们团队为特色的旋转木马。

我意识到， jquery mobile的触摸滑动手势虽然不是很宽容。 如果你想通过旋转木马滑动，但是向上/向下移动手指太多，页面将滚动并且旋转木马滑动。如果你只是想快速看一下旋转木马，这会导致旋转木马被越来越多地上下推动的恼人场景，直到它不再可见。

我很好奇如何解决它。我提出的代码片段与Chrome调试器完美配合，但遗憾的是不适用于实际的触控设备。在那里我可以滑动旋转木马，但不能滚动网站（当我滚动旋转木马时）。

我在这里缺少什么？

编辑：刚刚在Android + Chrome上测试过，它在那里工作非常顺利。所以现在我只是坚持IOS + Safari无法正常工作。

代码段：https://jsfiddle.net/bgzh8ea6/

var slidedOnce;
var xTouch;
var yTouch;
var thresholdY = 30;

$("#myCarousel").on("touchstart", function(event) {      
    if (!slidedOnce) {
      xTouch = event.originalEvent.touches[0].pageX;
      yTouch = event.originalEvent.touches[0].pageY;
    }
  event.stopPropagation();
});

$("#myCarousel").on("touchmove", function(event) {
  if (!slidedOnce) {
    $(this).bind("touchmove", preventDefault);
    var xDrag = event.originalEvent.touches[0].pageX;
    var yDrag = event.originalEvent.touches[0].pageY;
    if (Math.abs(Math.floor(yTouch - yDrag)) > thresholdY) {
      $(this).unbind("touchmove", preventDefault);
      slidedOnce = true;
    } else {
      if (Math.floor(xTouch - xDrag) > 30) {
        $(this).carousel("next");
        slidedOnce = true;
      } else if (Math.floor(xTouch - xDrag) < -30) {
        $(this).carousel("prev");
        slidedOnce = true;
      }
    }
  }
});

$("#myCarousel").on("touchend", function() {
  slidedOnce = false;
  $(this).bind("touchmove", preventDefault);
});

function preventDefault(e) {
  e.preventDefault()
}

旋转木马触摸滑动实施

0 个答案: