vue-infinite-loading簡要教程

function

能夠實現瀑布流式累加載。

install

1. npm i vue-infinite-loading --save
2. import InfiniteLoading from 'vue-infinite-loading' 或 const InfiniteLoading require('vue-infinite-loading')
3. <script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>

usage

1. 須要累加載頁面元素時。
2. 放在頁面底部。
3. 在InfinityLoading組件中監聽infinite事件。

infinite事件觸發的函數有一個特殊事件參數（$state）。
$state.loaded() => 表示已經加載成功，用於當次加載數據成功時。此時出現slot="no-more"的內容
$state.complete() => 表示已經加載完成，用於加載數據結束時。此時出現slot="no-resluts"的內容
$state.reset() => 表示
<tag slot="no-more"></tag> => 表示在沒有更多元素時（即加載完數據時）顯示
在InfinityLoading組件中設置ref="child"。運行this.$refs.child.$emit('$InfiniteLoading:reset')可使用組件回到初始狀態，此時組件會當即請求新數據。
能夠寫多個參數 <infinite-loading @infinite="handler($event, arg0, arg1, arg2)"></infinite-loading>

properties

1. distance InfiniteLoading距離底部多遠時觸發加載數據的事件。
2. spinner 等待加載數據時的動畫。 default/bubbles/circles/spiral/waveDots
3. ref
4. direction 觸發加載數據的滑動方法 bottom/top

slot

1. no-resluts
2. no-more
3. spinner

在服務端渲染（ssr）

1. use
   import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading.vue'
   import InfiniteLoading from 'vue-infinite-loading'
2. npm i less less-loader --save-dev

與第三方滾動插件一塊兒使用。

（我不會那這些第三方插件，因此我不會處理這種狀況）

手動觸發加載數據

1. 設置一個加載按鈕，爲其綁定加載事件。
2. 加載按鈕與InfinityLoaing組件的顯示互斥。（v-if, v-else）
3. 頁面初始化時，渲染加載按鈕（也就是說不渲染InfiniteLoading組件）。
4. 點擊加載按鈕時。改變加載按鈕的顯示條件。出現InfiniteLoading組件，它開始工做。
5. InfiniteLoading加載數據後再次改變加載按鈕的顯示條件。