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

前端之家收集整理的这篇文章主要介绍了vue-infinite-loading2.0 中文文档详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_403_1@简介

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

@H_403_1@特点

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

@H_403_1@

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

@H_403_1@导入方式

@H_403_1@es6模块导入方式

CommonJS 模块导入方式

@H_403_1@其他方式

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

@H_403_1@开始

@H_403_1@基础使用

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

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

@H_403_1@Template

@H_403_1@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 } };

在@H_403_1@onInfinite函数中,每次我们都push 20 个数字到list数组中。我们使用@H_403_1@setTimeout来模拟异步请求。最后,不要忘了触发一个@H_403_1@$InfiniteLoading:loaded事件,它将告诉@H_403_1@InfiniteLoading组件,数据已经下载成功。

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

@H_403_1@

列表页面

在这个例子中,我们将模仿一个黑客新闻列表页面,但是会用@H_403_1@InfiniteLoading代替@H_403_1@分页

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

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

@H_403_1@Template

![](https://news.ycombinator.com/y18.gif) Hacker News

在模板中,我们为黑客新闻列表创建了一个header 和 一个list 。在这个例子中的

InfiniteLoading

组件,与上个例子中使用方式有些不同。我们基于

slot

自定义了当没有更多数据时的提示内容。

Script

{ if (res.data.hits.length) { this.list = this.list.concat(res.data.hits); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); if (this.list.length / 20 === 3) { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } } else { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } }); } },components: { InfiniteLoading } };

onInfinite

函数中,我们请求了一页的新闻,并且每次将它们推入到list数组中。如果我们请求了3页新闻,将触发

$InfiniteLoading:complete

事件去告诉

InfiniteLoading

组件,现在已经没有更多数据可以加载了。它将显示我们自定义在模板中的,表示没有更多数据的提示内容。

Style

a { color: #333; padding-right: 5px; } .hacker-news-list .hacker-news-item p a { text-decoration: none; } .hacker-news-list .hacker-news-item p small,.hacker-news-list .hacker-news-item p small a { color: #888; }

在上个例子的基础上,我们将在头部创建一个下拉选择作为过滤器,当我们改变过滤器,列表将会重新加载。

Template

Script

{ if (res.data.hits.length) { this.list = this.list.concat(res.data.hits); this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); if (this.list.length / 20 === 10) { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } } else { this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete'); } }); },changeFilter() { this.list = []; this.$nextTick(() => { this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset'); }); } },components: { InfiniteLoading } };

changeFilter

函数中,我们清楚了列表并等待DOM更新,然后我们触发一个

$InfiniteLoading:reset

事件,目的是让

InfiniteLoading

组件回到最初状态,它将立刻请求新的数据。

Style

在上个例子基础上增加样式

服务端渲染(SSR)是

Vue.js2.0

的新特性,当你在你的SSR应用中使用这个组件,会得到类似这样的错误:

因为

style-loader

不支持在这个时候本地导出,详情点
这里,所以我们需要下面的变通方案,为了你的SSR应用:

代替

@H_403_1@npm install less less-loader --save-dev 如果你还没有安装它们。

然后你的SSR应用应该运行良好。如果不是,你可以加入这个issue去讨论。

@H_403_1@

属性

@H_403_1@on-infinite

这是一个回调函数,当滚动到距离滚动父元素底部特定距离的时候,会被调用

通常,在数据加载完成后,你应该在这个函数中发送@H_403_1@$InfiniteLoading:loaded事件。

@H_403_1@distance

这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么@H_403_1@on-infinite回调函数就会被调用

required false - default 100 - unit pixel

@H_403_1@spinner

通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。

required false - default 'default'

@H_403_1@ref

正如你所知,这个属性是一个Vue.js的官方指令,用来获取子组件的实例。我们需要用它来得到@H_403_1@ InfiniteLoading 组件的实例来发送事件。你可以用这种方式来得到实例:@H_403_1@this.$refs[the value of ref attribute].

required true

@H_403_1@direction

如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用on-infinite函数

@H_403_1@警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用on-infinite函数

@H_403_1@

@H_403_1@InfiniteLoading 组件将处理一下事件。如果你需要通过组件的实例来@H_403_1@$emit,则可以通过@H_403_1@ref属性来得到组件实例。

$InfiniteLoading:loaded

通常,你需要在数据加载后发送这个事件,@H_403_1@ InfiniteLoading组件将隐藏加载动画,并且准备下一次触发。

$InfiniteLoading:complete

如果@H_403_1@InfiniteLoading组件就不会接收@H_403_1@$InfiniteLoading:loaded,当你发送这个事件后,它将为用户显示一个没有结果的提示。如果@H_403_1@InfiniteLoading组件接收过@H_403_1@$InfiniteLoading:loaded,当你发送这个事件的时候,它会为用户显示一个没有更多内容提示。你可以利用slot自定义需要显示内容

你的@H_403_1@onInfinite函数可能像这个样子:

{ if (res.data) { this.list = this.list.concat(res.data); this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:loaded'); } else { this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:complete'); } }); }

$InfiniteLoading:reset

@H_403_1@InfiniteLoading组件将会回到最初的状态,并且@H_403_1@on-infinite函数将会立刻被调用。大部分情况下,如果你把这个组件同过滤器或制表符一起使用,这个事件还是有用的。

@H_403_1@

你可以利用@H_403_1@slot自定义提示内容,当然,如果你喜欢的话,也可以使用默认内容

@H_403_1@no-results

当@H_403_1@InfiniteLoading组件接收到@H_403_1@$InfiniteLoading:complete 事件并且它没有接收过@H_403_1@$InfiniteLoading:loaded事件时,这个内容显示出来。

@H_403_1@no-more

当@H_403_1@InfiniteLoading组件接收到@H_403_1@$InfiniteLoading:complete 事件并且它已经接收过@H_403_1@$InfiniteLoading:loaded事件时,这个内容会出现。

@H_403_1@spinner

如果,你不喜欢当前旋转器,你可以自定义自己的旋转器作为加载时的动画。

@H_403_1@

你可以用@H_403_1@spinner属性,选择你最喜爱的旋转器作为加载动画:

点击这里可以查看几个可用的旋转器。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章