vue-infinite-scroll插件可以無限滾動實現加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發某個方法。
https://github.com/ElemeFE/vue-infinite-scroll/
https://www.npmjs.com/package/vue-infinite-scroll

安裝

cnpm i vue-infinite-scroll -S

vue引用

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

使用

復制html到頁面

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">...
</div>

其中…部分可以替換成加載中提示語或加載中圖片。
在data中定義一個busy屬性，對應的是html中infinite-scroll-disabled選項

data () {busy: false //是否正在加載過程中}

在methods中定義一個loadMore方法，對應的是html中v-infinite-scroll選項，當滾動到距離底部指定位置時觸發的方法。

methods: {loadMore: function() {this.busy = true;//官方示例中延遲了1秒，防止滾動條滾動時的頻繁請求數據setTimeout(() => {//這里請求接口去拿數據，實際應該是調用一個請求數據的方法this.busy = false;}, 1000);}}

html中可設置的選項：
- v-infinite-scroll
指定觸發的方法

• infinite-scroll-distance
  指定滾動條距離底部多高時觸發v-infinite-scroll指向的方法

• infinite-scroll-disabled
  等于true時代表正在執行加載，這時禁用滾動觸發。

• infinite-scroll-immediate-check
  布爾值(默認值= true)。指令在綁定后立即檢查，是否內容高度不足以填充頁面容器。

• infinite-scroll-listen-for-event
  當vue實例觸發事件時立即再次檢查

• infinite-scroll-throttle-delay
  兩次檢查之間的時間間隔(默認值= 200)

注意

busy為true的時候代表正在執行加載，這時候滾動不會觸發方法，但并不會隱藏標簽中的內容，這個地方需要自己做處理。

要處理外層標簽和加載中提示的顯示問題

<div :class="loadMoreHide ? 'load-more-hide' : 'load-more-normal'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"><span v-show="loadingShow">加載中</span></div>

1、處理外層標簽<div v-infinite-scroll="loadMore" ...>的高度占位問題

.load-more-normal {text-align: center;height: 60px;line-height: 60px;}.load-more-hide {height: 0;}

定義一個loadMoreHide屬性，當還有數據的時候，當還有下一頁的時候用load-more-normal，沒有下一頁了就設為load-more-hide

if (this.pageNo >= totalPage) {this.busy = true //已經是最后一頁了，不需要再觸發滾動加載了this.loadMoreHide = true  //已經是最后一頁了，不需要高度了
} else {this.busy = falsethis.loadMoreHide = false
}

2、處理加載中提示
定義一個loadingShow屬性，當加載方法執行前設置為true，加載完畢即設置為false。

loadMore () {this.pageNo++this.busy = truethis.loadingShow = truesetTimeout(() => {this.getAjaxData(true)this.loadingShow = false}, 1000)}