vue-infinite-loading2.0 中文文档
简介
这是一个使用在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>组件,数据已经下载成功。
现在,我们可以根据上面的代码,来显示效果。
<p id="hacker">例子:黑客新闻列表页面</p>
在这个例子中,我们将模仿一个黑客新闻列表页面,但是会用<strong>InfiniteLoading</strong>代替<strong>分页</strong>
在开始这个例子之前,我们需要准备以下内容:
- 获取新闻列表的API,在本例中我们使用 HN Search API
- 导入axios插件来请求数据
Template
<div class="hacker-news-list">
<div class="hacker-news-header">
<a target="_blank" href="http://www.ycombinator.com/">
![](https://news.ycombinator.com/y18.gif)
</a>
<span>Hacker News</span>
</div>
<div class="hacker-news-item" v-for="(item, key) in list">
<span class="num" v-text="key + 1"></span>
<p>
<a target="_blank" :href="item.url" v-text="item.title"></a>
</p>
<p>
<small>
<span v-text="item.points"></span>
points by
<a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author"
v-text="item.author"></a>
|
<a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID"
v-text="item.num_comments + ' comments'"></a>
</small>
</p>
</div>
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
<span slot="no-more">
There is no more Hacker News :(
</span>
</infinite-loading>
</div>
在模板中,我们为黑客新闻列表创建了一个header 和 一个list 。在这个例子中的<strong>InfiniteLoading</strong>组件,与上个例子中使用方式有些不同。我们基于<strong>slot</strong>自定义了当没有更多数据时的提示内容。
Script
import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';
const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';
export default {
data() {
return {
list: []
};
},
methods: {
onInfinite() {
axios.get(api, {
params: {
page: this.list.length / 20 + 1
}
}).then((res) => {
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
}
};
在<strong>onInfinite</strong>函数中,我们请求了一页的新闻,并且每次将它们推入到list数组中。如果我们请求了3页新闻,将触发 <strong>$InfiniteLoading:complete</strong>事件去告诉<strong>InfiniteLoading</strong>组件,现在已经没有更多数据可以加载了。它将显示我们自定义在模板中的,表示没有更多数据的提示内容。
Style
.hacker-news-list .hacker-news-item {
margin: 10px 0;
padding: 0 10px 0 32px;
line-height: 16px;
font-size: 14px;
}
.hacker-news-list .hacker-news-item .num {
margin-top: 1px;
margin-left: -32px;
float: left;
width: 32px;
color: #888;
text-align: right;
}
.hacker-news-list .hacker-news-item p {
padding-left: 8px;
margin: 0;
}
.hacker-news-list .hacker-news-item .num:after {
content: ".";
}
.hacker-news-list .hacker-news-item p>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;
}
<p id="use">与过滤器一块使用</p>
在上个例子的基础上,我们将在头部创建一个下拉选择作为过滤器,当我们改变过滤器,列表将会重新加载。
Template
<div class="hacker-news-list">
<div class="hacker-news-header">
<a target="_blank" href="http://www.ycombinator.com/">
![](https://news.ycombinator.com/y18.gif)
</a>
<span>Hacker News</span>
<select v-model="tag" @change="changeFilter()">
<option value="story">Story</option>
<option value="poll">Poll</option>
<option value="show_hn">Show hn</option>
<option value="ask_hn">Ask hn</option>
<option value="front_page">Front page</option>
</select>
</div>
<div class="hacker-news-item" v-for="(item, key) in list">
<span class="num" v-text="key + 1"></span>
<p>
<a target="_blank" :href="item.url" v-text="item.title"></a>
</p>
<p>
<small>
<span v-text="item.points"></span>
points by
<a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author"
v-text="item.author"></a>
|
<a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID"
v-text="item.num_comments + ' comments'"></a>
</small>
</p>
</div>
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
<span slot="no-more">
There is no more Hacker News :(
</span>
</infinite-loading>
</div>
Script
import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';
const api = 'http://hn.algolia.com/api/v1/search_by_date';
export default {
data() {
return {
list: [],
tag: 'story'
};
},
methods: {
onInfinite() {
axios.get(api, {
params: {
tags: this.tag,
page: this.list.length / 20 + 1
}
}).then((res) => {
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
}
};
在<strong>changeFilter</strong>函数中,我们清楚了列表并等待DOM更新,然后我们触发一个<strong>$InfiniteLoading:reset</strong>事件,目的是让<strong> InfiniteLoading </strong>组件回到最初状态,它将立刻请求新的数据。
Style
在上个例子基础上增加样式
.demo-inner {
margin-left: 20px;
width: 261px;
height: 455px;
border: 1px solid #ccc;
overflow: auto;
}
.hacker-news-list .hacker-news-header {
padding: 2px;
line-height: 14px;
background-color: #f60;
}
.hacker-news-list {
min-height: 455px;
background-color: #f6f6ef;
}
.hacker-news-list .hacker-news-header select {
float: right;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
outline: none;
}
<p id="server">服务端渲染</p>
服务端渲染(SSR)是<strong>Vue.js2.0</strong>的新特性,当你在你的SSR应用中使用这个组件,会得到类似这样的错误:
Error: window is not defined
ReferenceError: window is not defined
at ...
at ...
at e.exports (...)
at Object. (...)
at p (...)
at Object.e.exports.render.e (...)
at p (...)
at Object. (...)
at p (...)
at e.__esModule.default (...)
因为<strong>style-loader</strong>不支持在这个时候本地导出,详情点这里,所以我们需要下面的变通方案,为了你的SSR应用:
用
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';
代替
import InfiniteLoading from 'vue-infinite-loading';
<strong>npm install less less-loader --save-dev</strong> 如果你还没有安装它们。
然后你的SSR应用应该运行良好。如果不是,你可以加入这个issue去讨论。
<p id="properties">属性<p>
on-infinite
这是一个回调函数,当滚动到距离滚动父元素底部特定距离的时候,会被调用。
通常,在数据加载完成后,你应该在这个函数中发送<strong>$InfiniteLoading:loaded</strong>事件。- type Function
- reuqired true
distance
这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么<strong>on-infinite</strong>回调函数就会被调用。- type Number
- required false
- default 100
- unit pixel
spinner
通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。- type String
- required false
- default 'default'
ref
正如你所知,这个属性是一个Vue.js的官方指令,用来获取子组件的实例。我们需要用它来得到<strong> InfiniteLoading </strong>组件的实例来发送事件。你可以用这种方式来得到实例:<strong>this.$refs[the value of ref attribute].</strong>- type String
- required true
direction
如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用on-infinite函数。
<strong>警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用on-infinite函数。</strong>- type String
- default 'bottom'
<p id="event">事件</p>
<strong>InfiniteLoading </strong>组件将处理一下事件。如果你需要通过组件的实例来<strong>$emit</strong>,则可以通过<strong>ref</strong>属性来得到组件实例。
$InfiniteLoading:loaded
通常,你需要在数据加载后发送这个事件,<strong> InfiniteLoading</strong>组件将隐藏加载动画,并且准备下一次触发。$InfiniteLoading:complete
如果<strong>InfiniteLoading</strong>组件就不会接收<strong>$InfiniteLoading:loaded</strong>,当你发送这个事件后,它将为用户显示一个没有结果的提示。如果<strong>InfiniteLoading</strong>组件接收过<strong>$InfiniteLoading:loaded</strong>,当你发送这个事件的时候,它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。
你的<strong>onInfinite</strong>函数可能像这个样子:onInfinite() {
this.$http.get(url, (res) => {
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
<strong>InfiniteLoading</strong>组件将会回到最初的状态,并且<strong>on-infinite</strong>函数将会立刻被调用。大部分情况下,如果你把这个组件同过滤器或制表符一起使用,这个事件还是有用的。
<p id="slots">插槽</p>
你可以利用<strong>slot</strong>自定义提示的内容,当然,如果你喜欢的话,也可以使用默认内容:
<span slot="{{ slot name }}">
{{ Your content }}
</span>
no-results
当<strong>InfiniteLoading</strong>组件接收到<strong>$InfiniteLoading:complete </strong>事件并且它没有接收过<strong>$InfiniteLoading:loaded</strong>事件时,这个内容会显示出来。- type String
- default No results :(
no-more
当<strong>InfiniteLoading</strong>组件接收到<strong>$InfiniteLoading:complete </strong>事件并且它已经接收过<strong>$InfiniteLoading:loaded</strong>事件时,这个内容会出现。spinner
如果,你不喜欢当前旋转器,你可以自定义自己的旋转器作为加载时的动画。- type HTML
- default default spinner
<p id="spinners">旋转器</p>
你可以用<strong>spinner</strong>属性,选择你最喜爱的旋转器作为加载动画:
<infinite-loading spinner="{{ spinner name }}"></infinite-loading>
点击这里可以查看几个可用的旋转器。
作者:no_shower
链接:https://www.jianshu.com/p/bfb5ca56b4fb
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
vue-infinite-loading2.0 中文文档的更多相关文章
- Apache Storm 1.1.0 中文文档 | ApacheCN
前言 Apache Storm 是一个免费的,开源的,分布式的实时计算系统. 官方文档: http://storm.apache.org 中文文档: http://storm.apachecn.org ...
- Django2.0中文文档
title: Django2.0中文文档 tags: Python,Django,入沐三分 grammar_cjkRuby: true --- Django2.0版本已经发布了,我们先来看一个图片 从 ...
- Apache Spark 2.2.0 中文文档
Apache Spark 2.2.0 中文文档 - 快速入门 | ApacheCN Geekhoo 关注 2017.09.20 13:55* 字数 2062 阅读 13评论 0喜欢 1 快速入门 使用 ...
- webpack4.0中文文档踩坑记录
一直没有正儿八经去看过webpack4.0的文档,前段时间工作比较轻松,于是就有了此文...面都这样一个问题:请问在您的开发生涯中,令你最痛苦最无奈的是什么?小生的回答只有一个:“阅读那些令人发指的文 ...
- Apache Spark 2.2.0 中文文档 - 概述 | ApacheCN
Spark 概述 Apache Spark 是一个快速的, 多用途的集群计算系统. 它提供了 Java, Scala, Python 和 R 的高级 API,以及一个支持通用的执行图计算的优化过的引擎 ...
- Apache Spark 2.2.0 中文文档 - Spark SQL, DataFrames and Datasets Guide | ApacheCN
Spark SQL, DataFrames and Datasets Guide Overview SQL Datasets and DataFrames 开始入门 起始点: SparkSession ...
- Apache Spark 2.2.0 中文文档 - SparkR (R on Spark) | ApacheCN
SparkR (R on Spark) 概述 SparkDataFrame 启动: SparkSession 从 RStudio 来启动 创建 SparkDataFrames 从本地的 data fr ...
- Julia 1.0 中文文档
欢迎来到Julia 1.0的文档. 请阅读发布博客文章,了解该语言的一般概述以及自Julia v0.6以来的许多更改.请注意,0.7版本与1.0一起发布,以提供1.0版本之前的软件包和代码的升级路径. ...
- Apache Spark 2.2.0 中文文档 - Structured Streaming 编程指南 | ApacheCN
Structured Streaming 编程指南 概述 快速示例 Programming Model (编程模型) 基本概念 处理 Event-time 和延迟数据 容错语义 API 使用 Data ...
随机推荐
- BZOJ 1011--[HNOI2008]遥远的行星(乱搞)
1011: [HNOI2008]遥远的行星 Time Limit: 10 Sec Memory Limit: 162 MBSec Special JudgeSubmit: 5684 Solved ...
- web socket 入门
WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议,其优雅地解决了以往web服务器不能向web客户端实时推送消息的问题. 在浏览器js环境中,创建一个websock ...
- [Umbraco] 项目结构
主要包括以下几个部分 Umbraco.businesslogic(基础) Umbraco.cms (核心) Umbraco.controls(控件) Umbraco.datalayer(数据) Umb ...
- xamarin 安卓输出中文错误 乱码解决
在编译设置附加参数 -J-Duser.language=en 这个错误信息是来自javac 编译产生的 而中文乱码问题是 GBK 和UTF8 的问题 解决的办法就是让javac 输出英文错误信息 也可 ...
- h5 端图片上传-模拟多张上传
1.由于后端的限制,上传图片到服务器只能的一张一张传2.显示图片预览是本地的图片3.根据服务器返回的结果拿到相应的路径保存到提交评论的接口中4.删除的时候,需要删除对应的路径,不要把删除的提交到评论的 ...
- Android的断点续传的下载在线文件示例
Android的断点续传的下载在线文件示例 文件的结构如下: activity_main.xml: <LinearLayout xmlns:android="http://schema ...
- 【下载】分享一个ida脚本,非常方便
标 题: [下载]分享一个ida脚本,非常方便作 者: 梁萧时 间: 2013-09-05,13:32:14链 接: http://bbs.pediy.com/showthread.php?t=178 ...
- 全网最详细的zkfc启动以后,几秒钟以后自动关闭问题的解决办法(图文详解)
不多说,直接上干货! 问题详情 情况描述如题所示,zkfc启动以后,几秒钟以后自动关闭. 解决办法: 1.检查下每台机器的时间是否同步: 2.检查下每台机器的防火墙是否关闭: 3.查看zkfc的日志路 ...
- ptmalloc总结
内存管理的一般方法 C 风格的内存管理程序主要实现 malloc()和 free()函数. 内存池是一种半内存管理方法.Apache 使用了池式内存(pooled memory),将其连接拆分为各个阶 ...
- ObjectOutputStream
public class Test { public static void main(String[] args) throws Exception { //writeObject(); readO ...