大多数web应用程序背后的想法是从数据库中获取数据，并以最好的方式呈现给用户。当我们处理数据时，有时呈现数据的最佳方式是创建一个列表。
根据数据量及其内容，我们可以决定一次显示所有内容(非常少)或只显示较大数据集的特定部分(更有可能)。只显示部分现有数据的主要原因是，我们希望尽可能地保持应用程序的性能，避免加载或显示不必要的数据。
如果我们决定以“块”的形式显示数据，那么我们需要一种方法来导航这个数据***。导航一组数据的两种最常见的方法是:
首先是分页，这是一种将数据集划分为特定数量的页面的技术。它可以防止用户被一个页面上的大量数据淹没，并允许用户一次查看一组结果。以你正在阅读的这篇博客为例。主页上列出了最新的10篇文章。你需要点击一个按钮来查看下一组最新的帖子。
第二种常见的技术是无限滚动。如果你曾经在脸书或推特上浏览过时间轴，你可能对无限滚动很熟悉。
苹果新闻App也使用无限滚动技术来浏览文章列表。
在本文中，我们将更深入地研究第一种类型。分页是我们几乎每天都会遇到的事情，但并不是不重要。这是组件应用的一个很好的例子，所以这正是我们想要做的。我们将创建一个组件，负责一步一步地显示这个列表，并在点击要显示的特定页面时触发获取其他文章的操作。换句话说，我们正在用Vue.js创建一个分页组件，如下所示:
让我们一起来看看这些步骤。
#步骤1:用Vue创建一个ArticlesList组件
我们首先创建了一个显示文章列表的组件(但是还没有分页)。我们称之为文章列表。在该组件模板中，我们将遍历文章***，并将单个ArticleItem传递给每个ArticleItem组件。
在该组件的脚本部分，我们将设置初始数据:
articles: 这是一个空数组，填充了从mounted钩子上的API获取的数据。currentPage: 用于操作分页。pageCount : 这是在基于API响应的mounted钩子上计算的页面总数。visibleItemsPerPageCount: 这是我们希望在一个页面上看到的文章数量。
在这个阶段，我们只得到文章列表的第一页。这将为我们提供两篇文章的列表:
#步骤2:创建pageChangeHandle方法
现在，我们需要创建一个方法来加载下一页、上一页或选定的页面。
在pageChangeHandle方法中，在加载新文章之前，我们根据传递给方法的一个属性改变currentPage值，从API中获取特定页面对应的数据。收到新数据后，我们将用包含新文章页面的新数据替换现有文章数组。
#步骤3:创建一个组件来触发页面更改
我们已经有了pageChangeHandle方法，但是我们还没有在任何地方触发它。我们需要创建一个负责触发它的组件。
该组件应该完成以下工作:
允许用户进入下一页/上一页。允许用户从当前选定的页面跳转到一个范围内的特定页面。根据当前页面更改页码的范围。
如果我们把它画出来，它会是这样的:
我们继续吧！
#要求1:允许用户进入下一页或上一页
我们的BasePagination将包含两个按钮，分别负责转到下一页和上一页。
该组件将从父组件接受currentPage和pageCount属性，并在单击下一页或上一页按钮时将适当的操作返回给父组件。当我们在第一页或最后一页时，它还将负责禁用按钮，以防止移动有一个***。
我们将在ArticlesList组件中的ArticleItems下呈现该组件。
这是容易的部分。现在我们需要创建一个页码列表，每个页码允许我们选择一个特定的页面。页面的数量应该是可定制的，我们还需要确保我们不显示任何可能导致我们超出***范围的页面。
#需求2:允许用户进入某个范围内的特定页面
我们首先创建一个将用作单个页码的组件。我称之为BasePaginationTrigger。它将做两件事:显示从BasePagination组件传递的页码，并在用户单击特定页码时发出一个事件。
然后，该组件将在下一页和上一页上的按钮之间的BasePagination组件中呈现。
在脚本部分，我们需要添加另一个方法(onLoadPage)，它将在触发器组件发出LoadPage事件时被触发。此方法将接收被单击的页码，并将事件发送到ArticlesList组件。
然后，在ArticlesList中，我们将侦听该事件并触发pageChangeHandle方法，该方法将获取新页面的数据。
#要求三:根据当前页面改变页码范围
现在我们有了一个显示当前页面并允许我们再次获得同一页面的触发器。没用的，你说呢？让我们使用新创建的触发器组件。我们需要一个页面列表，允许我们从一个页面跳到另一个页面，而无需遍历中间页面。
我们还需要确保页面以良好的方式显示。我们总是希望显示分页列表中的第一页(最左边)和最后一页(最右边)，然后显示它们之间的剩余页面。
我们有三种可能的情况:
所选页码小于列表宽度的一半(如1 – 2 – 3 – 4 – 18)所选页码大于从列表末尾开始计算的列表宽度的一半(例如1 – 15 – 16 – 17 – 18)所有其他情况(例如1 – 4 – 5 – 6 – 18)
为了处理这些情况，我们将创建一个计算属性，该属性将返回一个数字数组，该数组应显示在下一页和上一页的按钮之间。为了使该组件更加可重用，我们将接受visiblePagesCount属性，该属性将指定分页组件中应该有多少页面可见。
在逐一研究这些情况之前，让我们创建几个变量:
visiblePagesThreshold:- 告诉我们有多少页面来自中心(选定的页面应该被显示)paginationTriggersArray: 将用来填充页码的数组visiblePagesCount: 创建一个具有所需长度的数组
现在让我们来看看每一个场景。
情况1:所选页码小于列表宽度的一半
我们总是让第一个元素等于1。然后我们遍历列表，给每个元素添加一个索引。最后，我们添加最后一个值，并将其设置为等于最后一页的页码——如果需要，我们希望能够直接跳到最后一页。
情况2:所选页码大于从列表末尾开始计算的列表宽度的一半
与前面的场景类似，我们从最后一页开始遍历列表，这次我们从每个元素中减去索引。然后，我们反转数组以获得正确的顺序，并将1推入数组的第一个位置。
场景3:其他一切
我们知道什么数字应该在列表的中心:当前页面。我们也知道这个列表应该有多长。这允许我们获得数组中的第一个数字。然后，我们通过向每个元素添加索引来填充列表。最后，我们将1放入数组的第一个位置，并用最后一个页码替换最后一个数字。
这涵盖了我们所有的场景！现在我们只剩下最后一步了。
#步骤5:在BasePagination组件中呈现数字列表
既然我们已经确切地知道了要在分页中显示的数字，我们需要为分页中的每个数字提供一个触发器组件。
我们使用v-for指令来实现它。我们还添加了一个条件类，它将处理当前页面的选择。
所以我们完了！我们刚刚使用Vue构建了一个很好的可重用分页组件。
#何时应该避免这种模式
尽管这个组件考虑得非常周到，但它并不是所有涉及分页的用例的灵丹妙药。
例如，对于连续流式传输且结构相对扁平的内容，避免这种模式可能是个好主意。比如每个词条都在同一个层级，用户对它感兴趣的几率也差不多。换句话说，它不像是一篇多页的文章，而更像是主导航。
另一个例子是浏览新闻，而不是寻找特定的新闻文章。我们不需要确切地知道新闻在哪里，或者为了看一篇特定的文章我们需要滚动多少。
#就是这样！
我希望这种模式可以用在你的项目中，无论是简单的博客，复杂的电子商务网站，还是介于两者之间的网站。分页可能会很痛苦，但是拥有一个不仅可以重用而且可以用于大量场景的模块化模式可以使分页更容易处理。
本文来自至尊狂魔┈投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/481687.html
微信扫一扫 
