vue-infinite-loading簡要教程

xiaoqibTn 發(fā)布于2019-08-02 11:41 / 3025人閱讀

摘要：或需要累加載頁面元素時。在組件中監(jiān)聽事件。事件觸發(fā)的函數(shù)有一個特殊事件參數(shù)。表示已經(jīng)加載成功，用于當次加載數(shù)據(jù)成功時。運行可以使用組件回到初始狀態(tài)，此時組件會立即請求新數(shù)據(jù)。改變加載按鈕的顯示條件。

function

可以實現(xiàn)瀑布流式累加載。

install

npm i vue-infinite-loading --save

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

usage

需要累加載頁面元素時。

放在頁面底部。

在InfinityLoading組件中監(jiān)聽infinite事件。

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

properties

distance InfiniteLoading距離底部多遠時觸發(fā)加載數(shù)據(jù)的事件。

spinner 等待加載數(shù)據(jù)時的動畫。 default/bubbles/circles/spiral/waveDots

ref

direction 觸發(fā)加載數(shù)據(jù)的滑動方法 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

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

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

手動觸發(fā)加載數(shù)據(jù)

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

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

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

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

InfiniteLoading加載數(shù)據(jù)后再次改變加載按鈕的顯示條件。

云服務器 GPU云服務器 asp教程教程 hadoop教程視頻教程 php教程菜鳥教程 js坦克大戰(zhàn)教程教程

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

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

vue-infinite-loading簡要教程

摘要：或需要累加載頁面元素時。在組件中監(jiān)聽事件。事件觸發(fā)的函數(shù)有一個特殊事件參數(shù)。表示已經(jīng)加載成功，用于當次加載數(shù)據(jù)成功時。改變加載按鈕的顯示條件。與選項卡結合使用。為組件設置為一個切換的事件綁定函數(shù)在該函數(shù)體中清空列表后改變 function 可以實現(xiàn)瀑布流式累加載。 install npm i vue-infinite-loading --save import InfiniteLoa...

xioqua 2019-08-23 12:17 評論0 收藏0
Spring Boot [組件學習-Spring]

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

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

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

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