element ui无限滚动插件（vue-infinite-scroll）

1、安装

npm install vue-infinite-scroll --save

2、如果多处用到可以考虑在main.js中引入。如果只有单个页面使用，可以考虑在当前页中引入。

• main.js引用

• import infiniteScroll from 'vue-infinite-scroll'
  Vue.use(infiniteScroll)

3、

 <div
       v-infinite-scroll="handleInfiniteOnLoad"//页面滚动的回调函数
      :infinite-scroll-disabled="busy"//false表示执行handleInfiniteOnLoad，true表示不执行
      :infinite-scroll-distance="10"//页面滚动到离页尾多少像素的时候触发回调函数
  >
     <div v-for="item in data" :key="item.key">

     </div>
  </div>
  <div class="noMore" v-if="busy">没有更多了</div>

<script>
export default {
  data () {
    return {
      count: 0,
      data: [],
      busy: false
    }
  },
  methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)
    }
  }
}
</script>