注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本
如何安装
npm install vue-infinite-loading --save
导入方式
<script>
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],//测试数据
}
}
}
</script>
模板使用
<template>
<div>
<div v-for="(item, $index) in list" :key="$index">
<recommend :title="`第${item}条数据`"></recommend>
</div>
<infinite-loading :distance="distance" @infinite="infiniteHandler">
<div slot="spinner">小弟拼命加载中...</div>//加载中的文字
<div slot="no-more">已加载完毕!</div>//加载完毕的文字
<div slot="no-results">暂无数据:(</div>//没有数据的文字
</infinite-loading>
</div>
</template>
加载动画
- bubbles
- circles
- default
- spiral
- waveDots
