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

Question

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

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

$(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主屏幕的分页效果？

How can you create a paging effect in JS similar to the iOS home screen?

javascript

css

jquery

ipad

ios