vue-infinite-loading2.0 中文文档详解

简介

这是一个使用在Vue.js中的无限滚动插件，它可以帮助你快速创建一个无限滚动列表。

特点

1. 移动端支持友好
2. 兼容任何一个可以滚动的元素
3. 有不同的旋转器可以作为加载动画
4. 支持加载后显示结果
5. 支持两个方向的无限加载

注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本

rush:bash;"> npm install vue-infinite-loading --save

导入方式

es6模块导入方式

rush:js;"> import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading,},};

Commonjs 模块导入方式

rush:js;"> const InfiniteLoading = require('vue-infinite-loading'); export default { components: { InfiniteLoading,};

其他方式

rush:js;">

vue-infinite-loading.js会注册一个全局变量VueInfiniteLoading,使用时需要这样：

rush:js;"> ... components: { VueInfiniteLoading:VueInfiniteLoading.default,} ...

开始

基础使用

在本例中，我们将创建一个基本的无限列表,有如下三个步骤：

1. 在你的模板中，用v-for创建一个列表
2. 将InfiniteLoading组件放在列表的底部；
3. 将InfiniteLoading组件的ref属性设置为infiniteLoading，因为要用它来触发事件。
4. 为InfiniteLoading组件创建并绑定一个加载回调函数。

Template

rush:js;">

Script

{ 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 } };

在

onInfinite

函数中，每次我们都push 20 个数字到list数组中。我们使用

setTimeout

来模拟异步请求。最后，不要忘了触发一个

$InfiniteLoading:loaded

事件,它将告诉

InfiniteLoading

组件，数据已经下载成功。

现在，我们可以根据上面的代码，来显示效果。

列表页面

在这个例子中，我们将模仿一个黑客新闻列表页面，但是会用

InfiniteLoading

代替

分页

在开始这个例子之前，我们需要准备以下内容：

1. 获取新闻列表的API,在本例中我们使用 HN Search API
2. 导入axios插件来请求数据

Template

rush:xhtml;">

 Hacker News

points by |