简介
这是一个使用在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');
