使用”分页“、”加载更多“和”无限滚动“的详细指南

几乎每个应用程序都有数据，而这些数据必须以某种方式进行可视化。显示一组数据的常见方法是通过一个列表，这可能很快就会变得很长，让人难以阅读。

用于显示应用程序数据的常见方法

这些方法在动态网页上显示大型数据集，同时还提供更快的初始页面加载。例如，Google Web对其搜索答案使用分页法。

Twitter和Facebook使用无限滚动，用户不断滚动以不断看到新的帖子。无限滚动在社交媒体渠道上已经变得特别流行。

在手机上，谷歌和谷歌图片没有使用分页，而是使用 "加载更多 "按钮来显示搜索结果和图片。

本文将比较这些方法中的每一种，并指导你在你的应用程序中实施它们。

使用分页法来显示数据

使用分页法的优点

1. 分页可以方便导航和搜索。例如，在一个电子商务网站上，你可以通过点击回到某个特定的页面，轻松找到你之前查看的产品。
2. 分页是优先考虑实用性的网站的理想选择，因为每个结果集都有自己的页面和URL，这很容易记住并与页码共享。有时，一些数据集需要尊重特定的项目排列顺序，而分页就可以做到这一点。
3. 这种方法很适合那些不是为了让人上瘾而设计的网站。社交媒体网站会让人上瘾，因为在上面很难停止滚动，但传统的分页法迫使用户点击按钮并通过页面导航来访问数据，这使得它不容易上瘾。

使用分页法的缺点

1. 这是个老技术。分页在互联网诞生之初就已经存在了。所有过时的网站都有它，这种类型的分页不再是直观的了。
2. 没有人真正看完第一页。你曾经检查过谷歌结果的第二页吗？很可能没有。点击数字 "1"、"2 "和 "下一页 "可能是一个麻烦，使人们不敢看更多的结果。
3. 分页不那么适合移动设备。在移动设备上，用户宁愿选择加载更多按钮或无限滚动，因为移动设备的屏幕是垂直的。
4. 每一个新的结果都在一个新的页面上，导致了不必要的加载时间。这可以用浅层路由和预渲染来解决，但还是会让用户感到厌烦。

什么时候在你的应用程序中使用分页

如果你正在为网络建立一个目录或电子商务网站，请使用分页。然而，如果你正在建立任何移动网站或应用程序，你会想考虑实施一个 "加载更多 "按钮来代替。

观点。**如果你在移动端以列表形式显示数据，**那么一定要避免使用这种方法。这种方法在网格中运行良好。

在你的应用程序中使用 "加载更多 "按钮

使用 "加载更多 "按钮的优点

1. "加载更多 "按钮在移动设备上看起来很好，与分页不同，"加载更多 "机制在现有结果的基础上增加了更多的结果，而不会替换整个结果。
2. 要找到一个结果，用户只需不断点击**"加载更多"**，而不必记住该项目在哪一页上
3. "加载更多 "允许你通过用户点击**"加载更多 "的次数来轻松衡量用户的兴趣和参与度。**
4. 这种方法可以用来帮助用户更快地到达网站的页脚，意味着你的网站广告可以收集更多的印象。

使用 "加载更多 "按钮的缺点

1. 它可能很难搜索到，因为用户不会记得某个特定结果的位置。为了找到东西，他们大多要不断点击**"加载更多"。**
2. 使用 "加载更多"，潜在的印象可能会丢失，因为与无限滚动的设置相比，无论你在 "加载更多 "按钮下隐藏了什么内容，都不太可能被浏览。

何时使用 "加载更多"？

如果你在手机上建立任何没有无限滚动的列表视觉，请使用 "加载更多 "方法。如果你的应用程序不是一个社交媒体应用程序（在这种情况下，实现无限滚动会更好），如果你希望数据加载比分页更直观，你也应该使用这种方法。

请记住，在许多应用程序（包括社交媒体）中，用户通过向上滑动来刷新他们的feeds，特别是在Instagram中，通过点击新帖子。这些都是 "加载更多 "机制的形式，你可以从中获得灵感。

此外，如果你有大量的内容，但希望用户能到达页脚或将内容隐藏在付费墙后面，或者在这种情况下，你应该考虑使用 "加载更多 "按钮。

实施无限滚动

使用无限滚动的优点

1. 无限滚动鼓励用户在更长的时间内参与你的应用程序。通过无限滚动，没有任何东西可以阻止用户连续滚动，而且与分页和 "加载更多 "的方法相比，这样做需要花费最少的精力。
2. 与其他方法相比，无限滚动让用户感觉很快。滚动是无缝的，当用户到达接近观点的终点时，你总是可以在后台加载更多的内容，所以他们甚至不会意识到新内容是如何和何时加载的。
3. 它也适合于按时间顺序和基于算法的动态服务内容。用分页法，你的数据必须按一定的顺序排列。使用无限滚动意味着你可以灵活地决定如何提供内容，以何种顺序提供，这对社交媒体应用程序来说是理想的。

使用无限滚动的缺点

1. 如果你的网站或应用程序有一个页脚，它将永远不会被看到。
2. 采用无限滚动可能会让你的用户上瘾，这可能对他们的数字健康没有好处。截至发稿时，参议院提出了一项法案，如果通过，将禁止无限滚动。
   当然，它不太可能通过，但这说明了无限滚动在让用户迷恋你的平台方面有多大影响。
3. 无限卷轴更难浏览和搜索。通过分页，你可以记住特定的页码来检索特定的结果。但有了 "加载更多 "和无限滚动，人们将不得不向上滚动很长时间来寻找特定的内容。

你可以在这里阅读更多关于为什么你不应该使用无限滚动的信息。

何时使用无限滚动

如果你正在建立一个移动应用或社交媒体应用，或者只是想让用户连续滚动浏览大量内容（即博客），你应该使用无限滚动。

无限滚动如何工作

当用户到达视口的末端时，你会加载更多的结果。在普通的JavaScript中，它是这样工作的。

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        // you're at the bottom of the page, load more content here.
    }
};

// from stackoverflow (stackoverflow.com/questions/9439725/javascript-how-to-detect-if-browser-window-is-scrolled-to-bottom)

我画了一个图来帮助解释数据是如何被遍历的，以及光标是如何工作的。

所以，想象一下，你查询后端API，数据库中总共有90万个条目。你不会想要获取所有的条目，因为这会降低应用程序的性能。

为了简化，让我们用数字9来代替90万。

为了显示这些数据，你必须把它分成多个部分。它不一定要以相等的时间间隔显示，但通常是这样。这里是数据库中所有条目的列表。

{
  "data": [
    { id: 1 },
    { id: 2 },
    { id: 3 },
    { id: 4 },
    { id: 5 },
    { id: 6 },
    { id: 7 },
    { id: 8 },
    { id: 9 }
  ]
}

现在，因为一次性获取它们并不可行，你可以从后台的数据库中分块获取数据。

对于第一个结果，你只想获取前三个条目。

为了获取第一页，在数据库中查询 "前3条，后0条"。对于获取第二页，查询 "获取前3条，后3条"，以此类推。

你也可以使用术语limit/offset ，而不是first/skip 。

对于分页数据的获取，另一种经常使用的方法叫做游标。当使用游标时，"after "值被用来获取特定点之后的节点。

这里有一篇全面的文章，解释了为什么你可能想使用游标而不是limit/offset 方法。

当后端从数据库中获取选择性数据时，它会发送一个响应，通常看起来像这样。

{
  "data": [
    { id: 4 },
    { id: 5 },
    { id: 6 }
  ],
  "totalCount": 9,
  "fetchedCount": 3,
  "pageInfo": {
    "prevCursor": "prev_4", // <- this is usually converted to base64
    "nextCursor": "after_6", // <- this is usually converted to base64
    "hasNextPage": true // <- are there more pages remaining to fetch?
  }
}

然后，前端在这些游标上进行迭代，以获取分页数据的页面。

这个方法对于分页、"加载更多 "和无限滚动都是类似的，所以你可以通过使用上述方法获取数据来实现所有这些。

对于正常的分页，你必须同时使用next 和previous 光标。对于 "加载更多 "和无限滚动，你只需要next 游标，因为你必须通过它们来迭代，以不断获取更多的数据。

结论

通过使用这些分页方法中的一种--或混合使用--可以以最理想的方式显示大型数据集。编码愉快。

分页、加载更多按钮和无限滚动指南》一文出现在LogRocket博客上。