Mint-UI Infinite Scroll 无限滚动运用

最新推荐文章于 2025-06-03 20:48:04 发布

asing1elife

最新推荐文章于 2025-06-03 20:48:04 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue mint-ui

本文链接：https://blog.csdn.net/asing1elife/article/details/82696889

本文详细介绍了Mint-UI中无限滚动组件的使用方法，包括如何指定加载内容的方法、设置触发条件及距离阈值。同时，文章还探讨了如何避免重复加载和正确处理分页请求，确保无限滚动在达到尾页后不再重复发起请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mint-UI 自带一个支持无限滚动的组件，以下是用法

官网文档

Infinite Scroll

使用方法

v-infinite-scroll 指定加载内容的方法，在满足触发条件时，则会加载
- 注意如果内容加载的分页方法就一个，此处指定后，则不需要再通过 created() 调用分页方法，否则一开始会加载两次
infinite-scroll-distance 触发方法的阈值，底部距离的像素值

<div class="real-content" v-infinite-scroll="getMoocs" infinite-scroll-distance="10">
  <div class="hot-item" v-for="mooc in moocs" :key="mooc.hexId">
    ...
  </div>
</div>

注意点

值得注意的是该组件提供了一个 infinite-scroll-disabled 属性，文档中的说明是若为真，则无限滚动不会被触发
- 这很容易让人理解为当分页检测到没有下一页后，则不再触发无限滚动，但其实根本达不到这个效果
- 翻阅官方 GitHub 上作者的解释才知道这个属性其实为了防止分页内容在加载过程中重复加载，当内容加载完毕后，会被内部重置
- 所以要实现到达尾页后不再重复发起分页请求，需要通过以下方法

getMoocs() {
	// 检测是否存在下一页
  if (!this.page.hasNext) {
    return false
  }

  this.$fetch.mooc.page(this.page).then((res) => {
    this.page = new Page(res.data)

    this.moocs = _.concat(this.moocs, res.data.list)
  })
}