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,使用时需要这样: 开始基础使用在本例中,我们将创建一个基本的无限列表,有如下三个步骤:
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代替分页在开始这个例子之前,我们需要准备以下内容:
TemplateHacker News
points by | 在模板中,我们为黑客新闻列表创建了一个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组件,现在已经没有更多数据可以加载了。它将显示我们自定义在模板中的,表示没有更多数据的提示内容。Stylea {
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;
}
在上个例子的基础上,我们将在头部创建一个下拉选择作为过滤器,当我们改变过滤器,列表将会重新加载。 TemplateHacker News
points by | 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回调函数就会被调用。spinner通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。 ref正如你所知,这个属性是一个Vue.js的官方指令,用来获取子组件的实例。我们需要用它来得到 InfiniteLoading组件的实例来发送事件。你可以用这种方式来得到实例:this.$refs[the value of ref attribute].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属性,选择你最喜爱的旋转器作为加载动画:点击这里可以查看几个可用的旋转器。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |