我无法实现分页。使用 url 参数帮助实现分页（VUETIFY 或 BOOTSTRAP-VUE）

Posted 2023-02-16

【中文标题】我无法实现分页。使用 url 参数帮助实现分页（VUETIFY 或 BOOTSTRAP-VUE）

【英文标题】：I can't implement pagination. Help implement pagination (VUETIFY or BOOTSTRAP-VUE) with url params

【发布时间】：2021-12-12 03:04:59

【问题描述】：

帮助人们！我无法在 vuetify 和 bootstrap-vue 上实现分页。我有一个新闻门户。登录后，它被重定向到新闻页面。消息以卡片 () 的形式出现。结果是一页很长。

我不知道如何进行分页。？数据将如何变化。？我的消息以对象的形式出现。我将数据保存在 vuex 存储中，并通过 getter 将数据输出到组件中。

请解释并举例说明。互联网上没有很好的例子。所有来源链接到官方网站。而且官网有点混乱。

【参考方案1】：

据我所知，对于新闻页面等海量数据，推荐使用惰性加载方式。这意味着您可以从您的 API 中获取大约 50 个对象，当用户滚动并到达底部时，您必须加载其余 50 个新闻。

Lazy loading 是一种延迟加载或初始化资源或对象的做法，直到真正需要它们以提高性能和节省系统资源。

vuetify 有 v-lazy component，您可以将它用于您的卡片。

【讨论】：

即使对于图像，您也可以通过 vuetify 使用这种方法，例如 lazy-src="https://picsum.photos/id/11/10/6" 。 vuetifyjs.com/en/components/images/#usage