Question

我有一个个人作品集页面，该页面在滑车的拨轮输入上运行。我一直在尝试支持移动设备的触摸操作，但是遇到了一些问题。

我的Hammerjs解决方案似乎可以在android上运行，但不能在iphone上运行。
在某些手机上，下拉手势似乎有所刷新，但在其他手机上却没有。这对我的幻灯片的操作是有问题的。

这是我当前的幻灯片和Hammerjs代码

let ticking = false;
let isFirefox = /Firefox/i.test(navigator.userAgent);
let isIe = /MSIE/i.test(navigator.userAgent) || /Trident.*rv\:11\./i.test(navigator.userAgent);
let scrollSensitivitySetting = 100; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive)
let slideDurationSetting = 1500; //Amount of time for which slide is "locked"
let currentSlideNumber = 0;
let body = document.getElementsByTagName("BODY")[0];

let hammerTime = new Hammer(body);

hammerTime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammerTime.on("panup pandown", function (ev) {

  ev.preventDefault()
  console.log(ev)
  let delta = ev.deltaY;
  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
        previousItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
  }
})

function parallaxScroll(evt) {
  if (isFirefox) {
    delta = evt.detail * -120;
  } else if (isIe) {
    delta = -evt.deltaY;
  } else {
    delta = evt.wheelDelta;
  }
  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
        previousItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

function slideDurationTimeout(slideDuration) {
  setTimeout(function () {
    ticking = false;
  }, slideDuration);
}

let mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), {
  passive: true
});

有人认为他们可以为我指出使用哪种技术使这些滑动手势在任何手机上都能使用的正确方向吗？香草js可以轻松实现吗？ jQuery mobile是一个好的解决方案吗？我当前的代码有什么小的调整吗？如果有帮助，我可以提供当前在线页面的工作桌面版本。我要工作的唯一手势是向上滑动和向下滑动。我如何防止在移动设备上刷新刷新？

非常感谢你们。

Hammerjs在android上工作，而不在iphone上工作，可能使用普通js解决方案进行上下滑动？

0 个答案: