Vue无限滚动

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-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in data" :key="item.index">{{item.name}}</div>
 </div>

 data () {
    return {
      end: false,
      msgList : [],
      busy: false,
      rows: 10,
      page: 1
    }
  }

methods: {
    loadMore: function() {
      this.busy = true
      if(this.end == false) { //end是我用来判断后端是否有数据传回来的标志
        this.getMsg(this.rows, this.page)//此处放你后端获取msgList 数据的函数
      }     
    }，
    getMsg(rows, page) {
      const params = {
        rows:this.rows,
        page:this.page
      }
      this.$api.getMsg(params) //此接口是你们获取后端数据的接口
        .then((res) => {
        // 判断后端数据是否为空，是空的话就把end设置为true，这样就不会再向后端获取数据了
          if(!res.data.records[0]){
            this.end = true
          } else {
            // 不为空的话就把获取到的数据与之前的数据拼接，同时页数page自加，这样下次调用此函数就是获取下一页的是数据
            this.msgList = this.msgList.concat(res.data.records)
            this.page++
          }
          this.busy = false//代码回调成功需要加入此代码，表示让他接着执行loadMore代码
        })
        .catch((err) => {
          console.log(err)
        })
    },
  }
  //busy代表是否执行loadMore函数。只要busy为false就要执行loadMore函数，busy为true就不执行函数

4、选项解释

v-infinite-scroll="loadMore"表示回调函数是loadMore
infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，看清楚，busy表示繁忙，繁忙的时候是不执行的。
infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。通常我们会在页尾做一个几十像素高的“正在加载中…”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。

https://www.jianshu.com/p/c4abab8c1ba6