本篇文章主要介紹了Vue中的無限載入vue-infinite-loading的方法,現在分享給大家,也給大家做個參考。
本文介紹了Vue中的無限載入vue-infinite-loading的方法,分享給大家,具體如下:
注意:vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用,請安裝vue-infinite-loading1.3版本
如何安裝
##
npm install vue-infinite-loading --save
##導入方式
es6模組導入方式
#
import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading }, };
const InfiniteLoading = require('vue-infinite-loading');
export default {
components: {
InfiniteLoading
}
};
其他方式
#
<script src="vue-infinite-loading.js"></script>
直接在元件中宣告
components:{ InfiniteLoading }
範本部分
<infinite-loading @infinite="infiniteHandler">
<span slot="no-more">
我们是有底线的
</span>
</infinite-loading>
js部分
infiniteHandler($state) { setTimeout(() => { const temp = []; for (let i = this.list.length + 1; i <= this.list.length + 20; i++) { temp.push(i); } this.list = this.list.concat(temp); $state.loaded(); $state.complete(); }, 1000); }
#注意
如果還是使用
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
會出現警告,告訴你已經修改為傳參傳入$state使用這個方法。
屬性<infinite-loading @infinite="infiniteHandler" distance="Number"> </infinite-loading>
spinner:透過這個屬性,你可以選擇一個你最喜愛旋轉器作為載入動畫。
spinner="bubbles";1、bubbles
2、circles3、default
4、spiral5、waveDots
<infinite-loading @infinite="infiniteHandler" spinner="String"> </infinite-loading>
direction:如果你設定這個屬性為top,那麼這個元件將在你滾到頂部的時候,呼叫infiniteHandler函數。
警告:你必須在資料載入後,手動地將滾動父元素的scrollTop設定為正確的值,否則,該元件會一次又一次地呼叫infiniteHandler函數。
<infinite-loading @infinite="infiniteHandler" direction="String"> </infinite-loading>
上面是我整理給大家的,希望今後會對大家有幫助。
相關文章:#########jquery中的ajax如何傳回結果而非回呼方式即為同順序執行###############vue對storejs所取得的資料進行處理時遇到的幾個問題小結###############webpack本機開發環境無法用IP存取的解決方法########## ##################以上是Vue中的無限載入vue-infinite-loading的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!