vue 一直加载_Vue无限加载vue-infinite-loading使用详解

注意：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