search
HomeWeb Front-endJS Tutorialvue-infinite-loading2.0 usage instructions

This time I will bring you the instructions for using vue-infinite-loading2.0, what are the precautions when using vue-infinite-loading2.0, the following is a practical case, let's take a look.

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 methods

<script></script>

vue-infinite-loading.js will be registered A global variable VueInfiniteLoading needs to be used like this:

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

Start

Basic use

In this example, we To create a basic infinite list, there are 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

<template>
 <p>
  </p>
<p>
  Line:
  <span></span>
  </p>
  <infinite-loading>  </infinite-loading>
 
</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 on<strong>onInfinite</strong> In the function, each time we push 20 numbers into the list array. We use <strong>setTimeout</strong> to simulate asynchronous requests. Finally, don't forget to trigger an <strong>$InfiniteLoading:loaded</strong> event, which will tell the <strong>InfiniteLoading</strong> component that the data has been downloaded successfully. <p style="text-align: left;"></p>Now, we can show the effect based on the above code. <p style="text-align: left;"></p><p style="text-align: left;"></p><p id="hacker">Example: Hacker News List Page</p><strong></strong>In this example, we will imitate a Hacker News List page, but will use <strong>InfiniteLoading</strong> instead of <strong>pagination</strong><p style="text-align: left;"></p>Before starting this example, we need to prepare the following:<p style="text-align: left;"></p> <ol class=" list-paddingleft-2">
<li>Get the news list API, in this case we use HN Search API<p style="text-align: left;"></p>
</li>
<li>Import axios plug-in to request data<p style="text-align: left;"></p>
</li>
</ol><p style="text-align: left;">Template<strong></strong></p><pre class="brush:php;toolbar:false"><p>
 </p><p>
  <a>
   ![](https://news.ycombinator.com/y18.gif)
  </a>
  <span>Hacker News</span>
</p>
<p>
 <span></span>
 </p><p>
  <a></a>
 </p>
 <p>
  <small>
   <span></span>
   points by
   <a></a>
    |
   <a></a>
  </small>
 </p>

 <infinite-loading>
 <span>
  There is no more Hacker News :(
 </span>
 </infinite-loading>
In the template, we created a header and a list for the Hacker News list. The InfiniteLoading component in this example is used somewhat differently from the previous example. We customized the prompt content when there is no more data based on slot.

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 the onInfinite function, we request a page of news and push them into the list each time in the array. If we request 3 pages of news, the $InfiniteLoading:complete event will be triggered to tell the InfiniteLoading component 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

<p>
</p><p>
 <a>
  ![](https://news.ycombinator.com/y18.gif)
 </a>
 <span>Hacker News</span>
 <select>
  <option>Story</option>
  <option>Poll</option>
  <option>Show hn</option>
  <option>Ask hn</option>
  <option>Front page</option>
 </select>
</p>
<p>
 <span></span>
 </p><p>
  <a></a>
 </p>
 <p>
  <small>
   <span></span>
   points by
   <a></a>
   |
   <a></a>
  </small>
 </p>

<infinite-loading>
 <span>
  There is no more Hacker News :(
 </span>
</infinite-loading>

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

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

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

服务端渲染

服务端渲染(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自定义提示的内容,当然,如果你喜欢的话,也可以使用默认内容:

 <span>
  {{ Your content }}
 </span>

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属性,选择你最喜爱的旋转器作为加载动画:

<infinite-loading></infinite-loading>

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue组件与复用使用详解

Vue无限加载vue-infinite-loading使用详解

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
From C/C   to JavaScript: How It All WorksFrom C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsJavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldBeyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base

JavaScript: Exploring the Versatility of a Web LanguageJavaScript: Exploring the Versatility of a Web LanguageApr 11, 2025 am 12:01 AM

JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.

The Evolution of JavaScript: Current Trends and Future ProspectsThe Evolution of JavaScript: Current Trends and Future ProspectsApr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

Demystifying JavaScript: What It Does and Why It MattersDemystifying JavaScript: What It Does and Why It MattersApr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools