微客导航 » 文章资讯 » vue-infinite-loading2.0 中文文档详解

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

2023-09-14 10:21:04 231

简介

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

特点

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

安装

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

npminstallvue-infinite-loading--save

导入方式

es6模块导入方式

importInfiniteLoadingfrom'vue-infinite-loading';
exportdefault{
components:{
InfiniteLoading,
},
};

CommonJS模块导入方式

constInfiniteLoading=require('vue-infinite-loading');
exportdefault{
components:{
InfiniteLoading,
},
};

其他方式

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

...
components:{
VueInfiniteLoading:VueInfiniteLoading.default,
}
...

开始

基础使用

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

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

Template

Script

importInfiniteLoadingfrom'vue-infinite-loading';
exportdefault{
data(){
return{
list:[]
};
},
methods:{
onInfinite(){
setTimeout(()=>{
consttemp=[];
for(leti=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函数中，每次我们都push20个数字到list数组中。我们使用setTimeout来模拟异步请求。最后，不要忘了触发一个$InfiniteLoading:loaded事件,它将告诉InfiniteLoading组件，数据已经下载成功。

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

例子：黑客新闻列表页面

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

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

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

Template




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

HackerNews

pointsby

ThereisnomoreHackerNews:(

在模板中，我们为黑客新闻列表创建了一个header和一个list。在这个例子中的InfiniteLoading组件，与上个例子中使用方式有些不同。我们基于slot自定义了当没有更多数据时的提示内容。

Script

importInfiniteLoadingfrom'vue-infinite-loading';
importaxiosfrom'axios';
constapi='http://hn.algolia.com/api/v1/search_by_date?tags=story';
exportdefault{
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
}
};

在onInfinite函数中，我们请求了一页的新闻，并且每次将它们推入到list数组中。如果我们请求了3页新闻，将触发$InfiniteLoading:complete事件去告诉InfiniteLoading组件，现在已经没有更多数据可以加载了。它将显示我们自定义在模板中的，表示没有更多数据的提示内容。

Style

.hacker-news-list.hacker-news-item{
margin:10px0;
padding:010px032px;
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-itemp{
padding-left:8px;
margin:0;
}
.hacker-news-list.hacker-news-item.num:after{
content:".";
}
.hacker-news-list.hacker-news-itemp>a{
color:#333;
padding-right:5px;
}
.hacker-news-list.hacker-news-itempa{
text-decoration:none;
}
.hacker-news-list.hacker-news-itempsmall,.hacker-news-list.hacker-news-itempsmalla{
color:#888;
}

与过滤器一块使用

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

Template




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

HackerNews

Story
Poll
Showhn
Askhn
Frontpage

pointsby

ThereisnomoreHackerNews:(

Script

importInfiniteLoadingfrom'vue-infinite-loading';
importaxiosfrom'axios';
constapi='http://hn.algolia.com/api/v1/search_by_date';
exportdefault{
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
}
};

在changeFilter函数中，我们清楚了列表并等待DOM更新，然后我们触发一个$InfiniteLoading:reset事件，目的是让InfiniteLoading组件回到最初状态，它将立刻请求新的数据。

Style

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

.demo-inner{
margin-left:20px;
width:261px;
height:455px;
border:1pxsolid#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-headerselect{
float:right;
color:#fff;
background-color:transparent;
border:1pxsolid#fff;
outline:none;
}

服务端渲染

服务端渲染(SSR)是Vue.js2.0的新特性，当你在你的SSR应用中使用这个组件，会得到类似这样的错误：

Error:windowisnotdefined
ReferenceError:windowisnotdefined
at...
at...
ate.exports(...)
atObject.(...)
atp(...)
atObject.e.exports.render.e(...)
atp(...)
atObject.(...)
atp(...)
ate.__esModule.default(...)

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

importInfiniteLoadingfrom'vue-infinite-loading/src/components/Infiniteloading.vue';

代替

importInfiniteLoadingfrom'vue-infinite-loading';

npminstalllessless-loader--save-dev如果你还没有安装它们。

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

属性

on-infinite

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

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

-typeFunction
-reuqiredtrue

distance

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

-typeNumber
-requiredfalse
-default100
-unitpixel

spinner

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

-typeString
-requiredfalse
-default'default'

ref

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

-typeString
-requiredtrue

direction

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

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

-typeString
-default'bottom'

事件

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

$InfiniteLoading:loaded

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

$InfiniteLoading:complete

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

你的onInfinite函数可能像这个样子：

onInfinite(){
this.$http.get(url,(res)=>{
if(res.data){
this.list=this.list.concat(res.data);
this.$refs[yourrefattirbute'svalue].$emit('$InfiniteLoading:loaded');
}else{
this.$refs[yourrefattirbute'svalue].$emit('$InfiniteLoading:complete');
}
});
}

$InfiniteLoading:reset

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

插槽

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


{{Yourcontent}}

no-results

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

-typeString
-defaultNoresults:(

no-more

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

spinner

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

-typeHTML
-defaultdefaultspinner

旋转器

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐