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

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

本文关键字：屏幕 分页 iOS 类似于 JS 创建      更新时间：2023-09-26

我正在尝试为平板电脑创建一个网站，该网站具有用户在页面之间滑动的导航功能。该网站将仅在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主屏幕上浏览页面的流畅导航。

我知道这将永远不会和当地的经历一样，但我正在努力尽可能接近。有人能帮我指出一个更好的解决方案吗？

您应该尝试swipejs。刷屏效果真的很接近原生，而且它有一个非常好的api。

相关文章：