简介
这是一个使用在Vue.js中的无限滚动插件，它可以帮助你快速创建一个无限滚动列表。
特点
- 移动端支持友好
- 兼容任何一个可以滚动的元素
- 有不同的旋转器可以作为加载动画
- 支持加载后显示结果
- 支持两个方向的无限加载
<p id="installation">安装</p>
<strong>注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本</strong>
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="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>
vue-infinite-loading.js会注册一个全局变量VueInfiniteLoading,使用时需要这样：
...
components: {
VueInfiniteLoading:VueInfiniteLoading.default,
}
...
开始
基础使用
在本例中，我们将创建一个基本的无限列表,有如下三个步骤：
- 在你的模板中，用v-for创建一个列表
- 将InfiniteLoading组件放在列表的底部；
- 将InfiniteLoading组件的ref属性设置为infiniteLoading，因为要用它来触发事件。
- 为InfiniteLoading组件创建并绑定一个加载回调函数。
Template
<template> <div> <p v-for="item in list"> Line: <span v-text="item"></span> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> </infinite-loading> </div> </template>
Script
import InfiniteLoading from 'vue-infinite-loading';
export default {
data() {
return {
list: []
};
},
methods: {
onInfinite() {
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);
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
}, 1000);
}
},
components: {
InfiniteLoading
}
};
在<strong>onInfinite</strong>函数中，每次我们都push 20 个数字到list数组中。我们使用<strong>setTimeout</strong>来模拟异步请求。最后，不要忘了触发一个<strong>$InfiniteLoading:loaded</strong>事件,它将告诉<strong>InfiniteLoading</strong>组件，数据已经下载成功。