注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，請安裝vue-infinite-loading1.3版本

如何安裝

npm install vue-infinite-loading --save

導入方式

import InfiniteLoading from 'vue-infinite-loading';

export default {

mounted() {

},

components: {

InfiniteLoading,//直接在組件中聲明

},

methods: {

infiniteHandler($state) {

console.log("觸發")

setTimeout(() => {

const temp = [];

if(this.list.length>80){

$state.complete();

return;

}

for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {

temp.push(i);

}

this.list = this.list.concat(temp);

$state.loaded();

}, 1000);

},

},

data() {

return {

distance:100,//臨界值，距離底部多少距離時觸發函數 infiniteHandler

list: [1,2,3,4,5,6,7,8,9,0],//測試數據

}

}

}

模板使用

小弟拼命加載中...//加載中的文字已加載完畢!//加載完畢的文字暫無數據:(//沒有數據的文字

加載動畫

bubbles

circles

default

spiral

waveDots

總結

以上是生活随笔為你收集整理的vue 一直加载_Vue无限加载vue-infinite-loading使用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。