注意：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){
$plete();
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
