vue-infinite-loading2.0 Chinese documentation detailed explanation

This article mainly introduces the detailed explanation of vue-infinite-loading2.0 Chinese documentation. Now I share it with you and give it as a reference.

Introduction

This is an infinite scroll plug-in used in Vue.js, which can help you quickly create an infinite scroll list.

Features

1. Mobile friendly support

2. Compatible with any scrollable element

3. There are different rotators that can be used as loading animations

4. Supports displaying results after loading

5. Supports two Unlimited loading in all directions

Installation

Note : vue-infinite-loading2.0 can only be used in Vue.js2.0. If you want to use it in Vue.js1.0, please install vue-infinite-loading1.3 version

npm install vue-infinite-loading --save

Import Method

es6 module import method

import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, };

CommonJS module import method

const InfiniteLoading = require('vue-infinite-loading'); export default { components: { InfiniteLoading, }, };

Other ways

vue-infinite-loading.js will register a global The variable VueInfiniteLoading needs to be used like this:

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

Start

Basic use

In this example, we will create a basic infinite list, with the following three steps:

1. In your template, use v-for to create a list

2. Place the InfiniteLoading component at the bottom of the list;

3. Set the ref attribute of the InfiniteLoading component to infiniteLoading because it is used to trigger events.

4. Create and bind a loading callback function to the InfiniteLoading component.

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 } };

In theonInfinitefunction, each time we push 20 numbers into the list array. We usesetTimeoutto simulate asynchronous requests. Finally, don't forget to trigger an$InfiniteLoading:loadedevent, which will tell theInfiniteLoadingcomponent that the data has been downloaded successfully.

Now, we can show the effect based on the above code.

Example: Hacker News List Page

In this example, we will imitate a Hacker News List page, but will useInfiniteLoadinginstead ofpagination

Before starting this example, we need to prepare the following:

1. Get the news list API, in this case we use HN Search API

2. Import axios plug-in to request data

Template

 
  ![](https://news.ycombinator.com/y18.gif)  Hacker News 
 
  
  
 
   points by  |   
 
   There is no more Hacker News :(   

In the template, we created a header and a list for the Hacker News list. TheInfiniteLoadingcomponent in this example is used somewhat differently from the previous example. We customized the prompt content when there is no more data based onslot.

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 } };

In theonInfinitefunction, we request a page news, and push them into the list array each time. If we request 3 pages of news, the$InfiniteLoading:completeevent will be triggered to tell theInfiniteLoadingcomponent that there is no more data to load. It will display the prompt content we customized in the template to indicate that there is no more data.

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; }

##

Use with filter

Template

 
  ![](https://news.ycombinator.com/y18.gif)  Hacker News  Story Poll Show hn Ask hn Front page  
 
  
  
 
   points by  |   
 
   There is no more Hacker News :(   

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 } };

In thechangeFilterfunction, we clear the list and wait for the DOM to update, then we trigger an$InfiniteLoading:resetevent for the purpose Return theInfiniteLoadingcomponent to its original state and it will immediately request new data.

Add a style based on the previous example

.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">Server rendering

服务端渲染(SSR)是Vue.js2.0的新特性，当你在你的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 (...)

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

import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';

代替

import InfiniteLoading from 'vue-infinite-loading';

npm install less less-loader --save-dev如果你还没有安装它们。

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

属性

on-infinite

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

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

- type Function - reuqired true

distance

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

- type Number - required false - default 100 - unit pixel

spinner

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

- type String - required false - default 'default'

ref

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

- type String - required true

direction

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

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

- type String - 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[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自定义提示的内容，当然，如果你喜欢的话，也可以使用默认内容：

 {{ Your content }} 

no-results

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

- type String - default No results :(

no-more

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

spinner

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

- type HTML - default default spinner

旋转器

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jquery中的ajax如何返回结果而非回调方式即为同顺序执行

ajax实现点击不同的链接让返回的内容显示在特定div里

Jquery $.ajax函数外的一段代码的执行顺序

The above is the detailed content of vue-infinite-loading2.0 Chinese documentation detailed explanation. For more information, please follow other related articles on the PHP Chinese website!