vue-infinite-loading2.0 中文文档详解
前端之家 收集整理的这篇文章主要介绍了
vue-infinite-loading2.0 中文文档详解 ，
前端之家 小编觉得挺不错的，现在分享给大家，也给大家做个参考。
简介
这是一个使用在Vue.js中的无限滚动插件 ，它可以帮助你快速 创建一个无限滚动列表。
特点
移动端支持 友好
兼容任何一个可以滚动的元素
有不同的旋转器可以作为加载动画
支持 加载后显示 结果支持 两个方向的无限加载
注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本
导入方式
es6模块导入方式
CommonJS 模块导入方式
其他方式
vue-infinite-loading.js会注册 一个全局变量 VueInfiniteLoading,使用时需要这样：
开始
基础使用
在本例中，我们将创建一个基本的无限列表,有如下三个步骤：
在你的模板中，用v-for创建一个列表
将InfiniteLoading组件放在列表的底部 ；
将InfiniteLoading组件的ref属性 设置为infiniteLoading，因为要用它来触发事件。
为InfiniteLoading组件创建并绑定一个加载回调函数 。
Template
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 代替
在开始这个例子之前，我们需要准备以下内容 ：
获取 新闻列表的API,在本例中我们使用 HN Search API 导入axios 插件 来请求数据
Template
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
Hacker News
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应用：
代替
npm install less less-loader --save-dev 如果你还没有安装它们。
然后你的SSR应用应该运行良好。如果不是，你可以加入这个issue 去讨论。
属性
on-infinite
这是一个回调函数 ，当滚动到距离滚动父元素底部 特定距离的时候，会被调用 。
通常，在数据加载完成后，你应该在这个函数 中发送
$InfiniteLoading:loaded 事件。
distance
这是滚动的临界值。如果到滚动父元素的底部 距离小于这个值，那么
on-infinite 回调
函数 就会被
调用 。
required false
- default 100
- unit pixel
spinner
通过这个属性 ，你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。
required false
- default 'default'
ref
正如你所知，这个属性 是一个Vue.js的官方指令，用来获取 子组件的实例。我们需要用它来得到
InfiniteLoading 组件的实例来发送事件。你可以用这种方式来得到实例：
this.$refs[the value of ref attribute].
required true
direction
如果你设置这个属性 为top,那么这个组件将在你滚到顶部的时候，调用 on-infinite函数 。
警告：你必须在数据加载后，手动地将滚动父元素的scrollTop设置为正确的值，否则，该组件会一次又一次调用 on-infinite函数 。
InfiniteLoading 组件将处理一下事件。如果你需要通过组件的实例来
$emit ,则可以通过
ref 属性 来得到组件实例。
$InfiniteLoading:loaded
通常，你需要在数据加载后发送这个事件，
InfiniteLoading 组件将隐藏加载动画，并且准备下一次触发。
$InfiniteLoading:complete
如果
InfiniteLoading 组件就不会接收
$InfiniteLoading:loaded ，当你发送这个事件后，它将为
用户 显示 一个没有结果的
提示 。如果
InfiniteLoading 组件接收过
$InfiniteLoading:loaded ，当你发送这个事件的时候，它会为
用户 显示 一个没有更多
内容 的
提示 。你可以利用
slot 来
自定义 需要
显示 的
内容 。
你的
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
InfiniteLoading 组件将会回到最初的状态，并且
on-infinite 函数 将会立刻被
调用 。大部分情况下，如果你把这个组件同过滤器或制表符一起使用，这个事件还是有用的。
你可以利用
slot 自定义 提示 的
内容 ，当然，如果你喜欢的话，也可以使用默认
内容 ：
no-results
当
InfiniteLoading 组件接收到
$InfiniteLoading:complete 事件并且它没有接收过
$InfiniteLoading:loaded 事件时，这个
内容 会
显示 出来。
no-more
当
InfiniteLoading 组件接收到
$InfiniteLoading:complete 事件并且它已经接收过
$InfiniteLoading:loaded 事件时，这个
内容 会出现。
spinner
如果，你不喜欢当前旋转器，你可以自定义 自己的旋转器作为加载时的动画。
你可以用
spinner 属性 ，选择你最喜爱的旋转器作为加载动画:
点击这里 可以查看几个可用的旋转器。
以上就是本文的全部内容 ，希望对大家的学习有所帮助，也希望大家多多支持 编程之家。
原文链接：https://www.f2er.com/vue/32850.html
