1. 安裝

npm install vue-infinite-scroll --save

2. main.js中配置並使用

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

3. 用法

1.放在底部

<div v-infinite-scroll ="loadMore" infinite-scroll-disabled ="busy" infinite-scroll-distance="5">
    <img src="static/img/loading.gif" alt="">
</div>
 

2.方法

var count = 0;
 
新的Vue（{
  el：'＃app'，
  資料：{
    資料：[]，
    忙：假
  }，
  方法： {
    loadMore：function（）{
      this.busy = true;
 
      setTimeout（（）=> {
        for（var i = 0，j = 10; i <j; i ++）{
          this.data.push（{name：count ++}）;
        }
        this.busy = false;
      }，1000）;
    }
  }
}）