Mint-UI Infinite Scroll 无限滚动运用

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

更多精彩

• 更多技术博客，请移步 asing1elife’s blog

官网文档

Infinite Scroll

使用方法

1. v-infinite-scroll 指定加载内容的方法，在满足触发条件时，则会加载
   
   • 注意如果内容加载的分页方法就一个，此处指定后，则不需要再通过 created() 调用分页方法，否则一开始会加载两次
2. 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>

注意点

1. 值得注意的是该组件提供了一个 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)
  })
}