<ul id="yices"></ul><fieldset id="yices"><menu id="yices"></menu></fieldset>

vue-infinite-loading簡要教程

xioqua 發布于2019-08-23 12:17 / 1606人閱讀

摘要：或需要累加載頁面元素時。在組件中監聽事件。事件觸發的函數有一個特殊事件參數。表示已經加載成功，用于當次加載數據成功時。改變加載按鈕的顯示條件。與選項卡結合使用。為組件設置為一個切換的事件綁定函數在該函數體中清空列表后改變

function

可以實現瀑布流式累加載。

install

npm i vue-infinite-loading --save

import InfiniteLoading from "vue-infinite-loading" 或 const InfiniteLoading require("vue-infinite-loading")

usage

需要累加載頁面元素時。

放在頁面底部。

在InfinityLoading組件中監聽infinite事件。

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

properties

distance InfiniteLoading距離底部多遠時觸發加載數據的事件。

spinner 等待加載數據時的動畫。 default/bubbles/circles/spiral/waveDots

ref

direction 觸發加載數據的滑動方法 bottom/top

slot

no-resluts

no-more

spinner

在服務端渲染（ssr）

use
import InfiniteLoading from "vue-infinite-loading/src/components/InfiniteLoading.vue"
import InfiniteLoading from "vue-infinite-loading"

npm i less less-loader --save-dev

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

（我不會那這些第三方插件，所以我不會處理這種情況）

手動觸發加載數據

設置一個加載按鈕，為其綁定加載事件。

加載按鈕與InfinityLoaing組件的顯示互斥。（v-if, v-else）

頁面初始化時，渲染加載按鈕（也就是說不渲染InfiniteLoading組件）。

點擊加載按鈕時。改變加載按鈕的顯示條件。出現InfiniteLoading組件，它開始工作。

InfiniteLoading加載數據后再次改變加載按鈕的顯示條件。

vue-infinite-loading與選項卡結合使用。

為vue-infinite-loading組件設置:indentifier="sv"
為一個切換tab的事件（@click="fn"）綁定函數
在該函數體中清空列表后改變sv

云服務器 GPU云服務器 asp教程教程 hadoop教程視頻教程 php教程菜鳥教程 js坦克大戰教程教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98261.html

vue-infinite-loading簡要教程

摘要：或需要累加載頁面元素時。在組件中監聽事件。事件觸發的函數有一個特殊事件參數。表示已經加載成功，用于當次加載數據成功時。運行可以使用組件回到初始狀態，此時組件會立即請求新數據。改變加載按鈕的顯示條件。 function 可以實現瀑布流式累加載。 install npm i vue-infinite-loading --save import InfiniteLoading from v...

xiaoqibTn 2019-08-02 11:41 評論0 收藏0
Spring Boot [組件學習-Spring]

摘要：框架最初是由編寫的，并且年月首次在許可下發布。在一個方法執行之后，只有在方法退出拋出異常時，才能執行通知在建議方法調用之前和之后，執行通知。方法執行之后，不考慮其結果，執行通知。導讀：在上篇文章的結尾提到了Spring Boot 提供了一系列的框架整合（Starter POMs)幫助我們提升開發效率,但是這并不意味著我們不需要學習這些框架，反而更需要去學習，通過學習這些框架可以使...

raoyi 2019-08-14 17:43 評論0 收藏0
8步從Python白板到專家，從基礎到深度學習

摘要：去吧，參加一個在上正在舉辦的實時比賽吧試試你所學到的全部知識微軟雅黑深度學習終于看到這個，興奮吧現在，你已經學到了絕大多數關于機器學習的技術，是時候試試深度學習了。微軟雅黑對于深度學習，我也是個新手，就請把這些建議當作參考吧。如果你想做一個數據科學家，或者作為一個數據科學家你想擴展自己的工具和知識庫，那么，你來對地方了。這篇文章的目的，是給剛開始使用Python進行數據分析的人，指明一條全...

Zachary 2019-04-25 18:00 評論0 收藏0