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
},
};
CommonJS 模塊導入方式
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部分
當滾動到底部時自動觸發(fā)infiniteHandler事件
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');
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
會出現(xiàn)警告，告訴你已經修改為傳參傳入$state使用這個方法。
屬性
distance:這是滾動的臨界值。如果到滾動父元素的底部距離小于這個值，那么infiniteHandler回調函數(shù)就會被調用。
<infinite-loading @infinite="infiniteHandler" distance="Number"> </infinite-loading>
spinner:通過這個屬性，你可以選擇一個你最喜愛旋轉器作為加載動畫。
spinner="bubbles";
1、bubbles
2、circles
3、default
4、spiral
5、waveDots
<infinite-loading @infinite="infiniteHandler" spinner="String"> </infinite-loading>
direction:如果你設置這個屬性為top,那么這個組件將在你滾到頂部的時候，調用infiniteHandler函數(shù)。
警告：你必須在數(shù)據(jù)加載后，手動地將滾動父元素的scrollTop設置為正確的值，否則，該組件會一次又一次調用infiniteHandler函數(shù)。
direction="top"
<infinite-loading @infinite="infiniteHandler" direction="String"> </infinite-loading>
本文借鑒：http://m.fzitv.net/article/137896.htm
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue2.0 $set()的正確使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue2+elementUI的el-tree的懶加載,文中給大家提到了element?ui?中?el-tree?實現(xiàn)懶加載的方法，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要為大家分享了vue多級多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要和大家分享一下vue中打印指定組件內容,多頁打印自動適配紙張大小打印的方案,文中的示例代碼講解詳細,需要的可以參考一下2024-03-03
這篇文章主要為大家介紹了Vue3.0組件通信mitt源碼ts實例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了Vue.js組件高級特性,結合實例形式詳細分析了vue.js組件遞歸、模板、動態(tài)加載、渲染等相關操作技巧,需要的朋友可以參考下2018-12-12
今天我們來學習一下watch偵聽器的好兄弟?watchEffect?偵聽器。這個相對來說比較簡單，用的不是很多，當然了，根據(jù)自己的項目情況自行決定使用，希望對大家有所幫助2022-07-07
這篇文章主要為大家詳細介紹了vue中實現(xiàn)路由鑒權和不同用戶登錄的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
Vue/React子組件實例暴露方法(TypeScript)
最近幾個月都在用TS開發(fā)各種項目，框架有涉及到Vue3,React18等，記錄一下Vue/React組件暴露出變量/函數(shù)的方法的寫法，對vue?react組件暴露方法相關知識感興趣的朋友跟隨小編一起看看吧2022-11-11