Rumah > Artikel > hujung hadapan web > vue-infinite-loading2.0 中文文档详解
本篇文章主要介绍了vue-infinite-loading2.0 中文文档详解,现在分享给大家,也给大家做个参考。
简介
这是一个使用在Vue.js中的无限滚动插件,它可以帮助你快速创建一个无限滚动列表。
特点
移动端支持友好
兼容任何一个可以滚动的元素
有不同的旋转器可以作为加载动画
支持加载后显示结果
支持两个方向的无限加载
1470e4c4545c449fad55b4f98dd7a657安装94b3e26ee717c64999d7867364b1b4a3
8e99a69fbe029cd4e2b854e244eab143注意:vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本128dba7a3a77be0113eb0bea6ea0a5d0
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> <p> <p v-for="item in list"> Line: <span v-text="item"></span> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> </infinite-loading> </p> </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 } };
在8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0函数中,每次我们都push 20 个数字到list数组中。我们使用8e99a69fbe029cd4e2b854e244eab143setTimeout128dba7a3a77be0113eb0bea6ea0a5d0来模拟异步请求。最后,不要忘了触发一个8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件,它将告诉8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件,数据已经下载成功。
现在,我们可以根据上面的代码,来显示效果。
177e29fb634747f9b66f06115f9cd63b例子:黑客新闻列表页面94b3e26ee717c64999d7867364b1b4a3
在这个例子中,我们将模仿一个黑客新闻列表页面,但是会用8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0代替8e99a69fbe029cd4e2b854e244eab143分页128dba7a3a77be0113eb0bea6ea0a5d0
在开始这个例子之前,我们需要准备以下内容:
获取新闻列表的API,在本例中我们使用 HN Search API
导入axios插件来请求数据
Template
<p class="hacker-news-list"> <p class="hacker-news-header"> <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" > ![](https://news.ycombinator.com/y18.gif) </a> <span>Hacker News</span> </p> <p 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" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" v-text="item.author"></a> | <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" rel="external nofollow" rel="external nofollow" v-text="item.num_comments + ' comments'"></a> </small> </p> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> <span slot="no-more"> There is no more Hacker News :( </span> </infinite-loading> </p>
在模板中,我们为黑客新闻列表创建了一个header 和 一个list 。在这个例子中的8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件,与上个例子中使用方式有些不同。我们基于8e99a69fbe029cd4e2b854e244eab143slot128dba7a3a77be0113eb0bea6ea0a5d0自定义了当没有更多数据时的提示内容。
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 } };
在8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0函数中,我们请求了一页的新闻,并且每次将它们推入到list数组中。如果我们请求了3页新闻,将触发 8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete128dba7a3a77be0113eb0bea6ea0a5d0事件去告诉8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件,现在已经没有更多数据可以加载了。它将显示我们自定义在模板中的,表示没有更多数据的提示内容。
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; }
97105bd38ce23b2d1bc18be6f3d6f12a与过滤器一块使用94b3e26ee717c64999d7867364b1b4a3
在上个例子的基础上,我们将在头部创建一个下拉选择作为过滤器,当我们改变过滤器,列表将会重新加载。
Template
<p class="hacker-news-list"> <p class="hacker-news-header"> <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" > ![](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> </p> <p 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" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" v-text="item.author"></a> | <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID" rel="external nofollow" rel="external nofollow" v-text="item.num_comments + ' comments'"></a> </small> </p> </p> <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading"> <span slot="no-more"> There is no more Hacker News :( </span> </infinite-loading> </p>
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 } };
在8e99a69fbe029cd4e2b854e244eab143changeFilter128dba7a3a77be0113eb0bea6ea0a5d0函数中,我们清楚了列表并等待DOM更新,然后我们触发一个8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:reset128dba7a3a77be0113eb0bea6ea0a5d0事件,目的是让8e99a69fbe029cd4e2b854e244eab143 InfiniteLoading 128dba7a3a77be0113eb0bea6ea0a5d0组件回到最初状态,它将立刻请求新的数据。
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; }
0c61604bc68e3e705ed83d5e311b7776服务端渲染94b3e26ee717c64999d7867364b1b4a3
服务端渲染(SSR)是8e99a69fbe029cd4e2b854e244eab143Vue.js2.0128dba7a3a77be0113eb0bea6ea0a5d0的新特性,当你在你的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 (...)
因为8e99a69fbe029cd4e2b854e244eab143style-loader128dba7a3a77be0113eb0bea6ea0a5d0不支持在这个时候本地导出,详情点这里,所以我们需要下面的变通方案,为了你的SSR应用:
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';
代替
import InfiniteLoading from 'vue-infinite-loading';
8e99a69fbe029cd4e2b854e244eab143npm install less less-loader --save-dev128dba7a3a77be0113eb0bea6ea0a5d0 如果你还没有安装它们。
然后你的SSR应用应该运行良好。如果不是,你可以加入这个issue去讨论。
74f6db73f95d6c7cf113470b60f859ff属性e388a4556c0f65e1904146cc1a846bee
on-infinite
这是一个回调函数,当滚动到距离滚动父元素底部特定距离的时候,会被调用。
通常,在数据加载完成后,你应该在这个函数中发送8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件。
- type Function - reuqired true
distance
这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么8e99a69fbe029cd4e2b854e244eab143on-infinite128dba7a3a77be0113eb0bea6ea0a5d0回调函数就会被调用。
- type Number - required false - default 100 - unit pixel
spinner
通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。
- type String - required false - default 'default'
ref
正如你所知,这个属性是一个Vue.js的官方指令,用来获取子组件的实例。我们需要用它来得到8e99a69fbe029cd4e2b854e244eab143 InfiniteLoading 128dba7a3a77be0113eb0bea6ea0a5d0组件的实例来发送事件。你可以用这种方式来得到实例:8e99a69fbe029cd4e2b854e244eab143this.$refs[the value of ref attribute].128dba7a3a77be0113eb0bea6ea0a5d0
- type String - required true
direction
如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用on-infinite函数。
8e99a69fbe029cd4e2b854e244eab143警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用on-infinite函数。128dba7a3a77be0113eb0bea6ea0a5d0
- type String - default 'bottom'
38c38741122f26a80e2405a6b6423450事件94b3e26ee717c64999d7867364b1b4a3
8e99a69fbe029cd4e2b854e244eab143InfiniteLoading 128dba7a3a77be0113eb0bea6ea0a5d0组件将处理一下事件。如果你需要通过组件的实例来8e99a69fbe029cd4e2b854e244eab143$emit128dba7a3a77be0113eb0bea6ea0a5d0,则可以通过8e99a69fbe029cd4e2b854e244eab143ref128dba7a3a77be0113eb0bea6ea0a5d0属性来得到组件实例。
$InfiniteLoading:loaded
通常,你需要在数据加载后发送这个事件,8e99a69fbe029cd4e2b854e244eab143 InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件将隐藏加载动画,并且准备下一次触发。
$InfiniteLoading:complete
如果8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件就不会接收8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0,当你发送这个事件后,它将为用户显示一个没有结果的提示。如果8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件接收过8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0,当你发送这个事件的时候,它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。
你的8e99a69fbe029cd4e2b854e244eab143onInfinite128dba7a3a77be0113eb0bea6ea0a5d0函数可能像这个样子:
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
8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件将会回到最初的状态,并且8e99a69fbe029cd4e2b854e244eab143on-infinite128dba7a3a77be0113eb0bea6ea0a5d0函数将会立刻被调用。大部分情况下,如果你把这个组件同过滤器或制表符一起使用,这个事件还是有用的。
92d3604ac803d08d30b463039f74eda2插槽94b3e26ee717c64999d7867364b1b4a3
你可以利用8e99a69fbe029cd4e2b854e244eab143slot128dba7a3a77be0113eb0bea6ea0a5d0自定义提示的内容,当然,如果你喜欢的话,也可以使用默认内容:
<span slot="{{ slot name }}"> {{ Your content }} </span>
no-results
当8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件接收到8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete 128dba7a3a77be0113eb0bea6ea0a5d0事件并且它没有接收过8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件时,这个内容会显示出来。
- type String - default No results :(
no-more
当8e99a69fbe029cd4e2b854e244eab143InfiniteLoading128dba7a3a77be0113eb0bea6ea0a5d0组件接收到8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:complete 128dba7a3a77be0113eb0bea6ea0a5d0事件并且它已经接收过8e99a69fbe029cd4e2b854e244eab143$InfiniteLoading:loaded128dba7a3a77be0113eb0bea6ea0a5d0事件时,这个内容会出现。
spinner
如果,你不喜欢当前旋转器,你可以自定义自己的旋转器作为加载时的动画。
- type HTML - default default spinner
22f5f78b10ba20c8dd94b11e3de0c231旋转器94b3e26ee717c64999d7867364b1b4a3
你可以用8e99a69fbe029cd4e2b854e244eab143spinner128dba7a3a77be0113eb0bea6ea0a5d0属性,选择你最喜爱的旋转器作为加载动画:
<infinite-loading spinner="{{ spinner name }}"></infinite-loading>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
jquery中的ajax如何返回结果而非回调方式即为同顺序执行
Atas ialah kandungan terperinci vue-infinite-loading2.0 中文文档详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!