vue-infinite-scroll 实现无限滚动

引言

在 Web 中，无限加载是必需的一项功能，大部分流行的插件都是基于 jQuery 的，好在找到一个 vue-infinite-scroll 插件。于是开始了 vue-infinite-scroll 的踩坑。

1.安装

npm install vue-infinite-scroll --save

2.载入

在 main.js 文件中

// 无限加载
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.使用

<div v-infinite-scroll="loadMore"
           infinite-scroll-throttle-delay="500"
           infinite-scroll-disabled="busy"
           immediate-check="false"
           infinite-scroll-distance="50">
  <ul>
    <li v-for="(item, key) in list" :key="key">{{item}}</li>
  </ul>
</div>

data () {
    return {
      list: [],
      busy: false，
      page: 0，
      total: 0,
      params: {
        current: 1,
        size: 10
      }
    }
  }

 methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        // 当前页数如果小于总页数，则继续请求数据，如果大于总页数，则滚动加载停止
        if (this.params.current < this.total) {
          //  这里是列表请求数据的接口,在这个接口中更新总页数
          this.getData(this.page)
        } else {

        }
        this.busy = false
      }, 1000)
    },
    getData (data) {
      this.params.current = data
      this.$api.exam.examIndex(this.params).then(res => {
        this.log(res.data)
        if (res.data.code === 200) {
          this.busy = false
          // 总条数
          this.total = res.data.page.total
          // 页数递增
          this.page++
          const list = res.data.list
      })
    }
  }

v-infinite-scroll="loadMore" : 表示回调函数是 loadMore

infinite-scroll-throttle-delay="500": 检查 busy 的值的时间间隔，默认值是 200 ，因为 vue-infinite-scroll 的基础原理就是，vue-infinite-scroll 会循环检查 busy 的值，以及是否滚动到底，只有当：busy 为 false 且滚动到底，回调函数才会执行。

infinite-scroll-disabled="busy": 表示由变量 busy 决定是否执行 loadMore ， false 则执行 loadMore ， true 则不执行

immediate-check="false": 默认值 true ， 表示该指令应该在绑定后立即检查。如果可能，内容不够高，不足以填满可滚动的容器。

infinite-scroll-distance="50": 距离页面底部多少像素时，执行 loadMore 函数

官方文档