vue-infinite-scroll------vue的無線滾動插件

vue-infinite-scroll------vue的無線滾動插件

博客說明

文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！

說明

Vue實現下拉加載最佳方案自然是使用vue-infinite-scroll來實現，這是我看到的最霸氣的一句好，就沖着這個來

官方GitHub地址

https://github.com/ElemeFE/vue-infinite-scroll

下載

到項目的目錄下執行次命令

cnpm install vue-infinite-scroll --save

使用

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  加載中    //可以放置動態的加載效果
  <img src="./../assets/loading-spinning-bubbles.svg" v-show="loading">
</div>

<script>
var count = 0;
new Vue({
  el: '#app',
  data: {
    data: [],
    busy: false
  },
  methods: {
    loadMore: function() {
      this.busy = true;
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({ name: count++ });
        }
        this.busy = false;
      }, 1000);
    }
  }
});
</script>

感謝

vue-infinite-scroll

萬能的互聯網

以及勤勞的自己