Question

我正在尝试为平板电脑创建一个网站，其中包含用户在页面之间滑动的导航。该网站仅在iOS设备上查看。

我尝试了一种方法，我将页面相对于触摸位置移动，然后在touchend scrollLeft将容器移动到页面位置。这是代码

$(function() {
  var xScreenStartPos, xScrollStartPos;
  xScrollStartPos = 0;
  xScreenStartPos = 0;
  $(document).on('touchstart', '.page', function(e) {
    xScreenStartPos = $(this).parent().scrollLeft();
    xScrollStartPos = e.originalEvent.touches[0].pageX;
  });
  $(document).on('touchmove', '.page', function(e) {
    var deltaX, xPos;
    e.preventDefault();
    xPos = e.originalEvent.touches[0].pageX;
    deltaX = xScrollStartPos - xPos;
    if ((deltaX > 50 || deltaX < -50) && scrollingVertical === false && menuOpen === false) {
      $(this).parent().scrollLeft(xScreenStartPos + deltaX);
    }
  });
  $('.page').on('touchend', function() {
    var previousPage;
    previousPage = void 0;
    $('.page:in-viewport').each(function() {
      if ($(this) !== previousPage && $(this).offset().left < 512 && $(this).offset().left > -511) {
        $(this).parent().animate({
          scrollLeft: $(this).parent().scrollLeft() + $(this).offset().left
        }, 250);
      }
    });
  });
});

然而，这种方法非常紧张，感觉迟钝。它并不像一个流畅的用户体验。我想要复制的是类似于在iPad主屏幕上的页面之间滑动的平滑导航。

我知道它永远不会与本机体验相同，但我想尽可能接近。有谁能帮我指点一个更好的解决方案？

Answer 1

您应该尝试swipejs。滑动效果非常接近原生，并且它具有非常好的api。

如何在JS中创建类似于iOS主屏幕的分页效果？

1 个答案: