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
Mobile friendly support
Compatible with any scrollable element
There are different rotators that can be used as loading animations
Supports displaying results after loading
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
<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>
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:
In your template, use v-for to create a list
Place the InfiniteLoading component at the bottom of the list;
Set the ref attribute of the InfiniteLoading component to infiniteLoading because it is used to trigger events.
Create and bind a loading callback function to the InfiniteLoading component.
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
}
};In the onInfinite function, each time we push 20 numbers into the list array. We use setTimeout to simulate asynchronous requests. Finally, don't forget to trigger an $InfiniteLoading:loaded event, which will tell the InfiniteLoading component 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 use InfiniteLoading instead of pagination
Before starting this example, we need to prepare the following:
Get the news list API, in this case we use HN Search API
Import axios plug-in to request data
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" >
</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>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 news, and push them into the list array each time. 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
Based on the previous example, we will create a drop-down selection in the header as a filter. When we change the filter, the list will reload.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" >
</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
}
};In the changeFilter function, we clear the list and wait for the DOM to update, then we trigger an $InfiniteLoading:reset event for the purpose Return the InfiniteLoading component to its original state and it will immediately request new data.
StyleAdd 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自定义提示的内容，当然，如果你喜欢的话，也可以使用默认内容：
<span slot="{{ slot name }}">
{{ 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 spinner="{{ spinner name }}"></infinite-loading>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to set Chinese in Call of Duty: Warzone mobile game
Mar 22, 2024 am 08:41 AM
Call of Duty Warzone is a newly launched mobile game. Many players are very curious about how to set the language of this game to Chinese. In fact, it is very simple. Players only need to download the Chinese language pack, and then You can modify it after using it. The detailed content can be learned in this Chinese setting method introduction. Let us take a look together. How to set the Chinese language for the mobile game Call of Duty: Warzone 1. First enter the game and click the settings icon in the upper right corner of the interface. 2. In the menu bar that appears, find the [Download] option and click it. 3. Select [SIMPLIFIEDCHINESE] (Simplified Chinese) on this page to download the Simplified Chinese installation package. 4. Return to the settings
How to display Chinese characters correctly in PHP Dompdf
Mar 05, 2024 pm 01:03 PM
How to display Chinese characters correctly in PHPDompdf When using PHPDompdf to generate PDF files, it is a common challenge to encounter the problem of garbled Chinese characters. This is because the font library used by Dompdf by default does not contain Chinese character sets. In order to display Chinese characters correctly, we need to manually set the font of Dompdf and make sure to select a font that supports Chinese characters. Here are some specific steps and code examples to solve this problem: Step 1: Download the Chinese font file First, we need
Setting up Chinese with VSCode: The Complete Guide
Mar 25, 2024 am 11:18 AM
VSCode Setup in Chinese: A Complete Guide In software development, Visual Studio Code (VSCode for short) is a commonly used integrated development environment. For developers who use Chinese, setting VSCode to the Chinese interface can improve work efficiency. This article will provide you with a complete guide, detailing how to set VSCode to a Chinese interface and providing specific code examples. Step 1: Download and install the language pack. After opening VSCode, click on the left
An effective way to fix Chinese garbled characters in PHP Dompdf
Mar 05, 2024 pm 04:45 PM
Title: An effective way to repair Chinese garbled characters in PHPDompdf. When using PHPDompdf to generate PDF documents, garbled Chinese characters are a common problem. This problem usually stems from the fact that Dompdf does not support Chinese character sets by default, resulting in Chinese content not being displayed correctly. In order to solve this problem, we need to take some effective ways to fix the Chinese garbled problem of PHPDompdf. 1. Use custom font files. An effective way to solve the problem of Chinese garbled characters in Dompdf is to use
How to set Excel table to display Chinese? Excel switching Chinese operation tutorial
Mar 14, 2024 pm 03:28 PM
Excel spreadsheet is one of the office software that many people are using now. Some users, because their computer is Win11 system, so the English interface is displayed. They want to switch to the Chinese interface, but they don’t know how to operate it. To solve this problem, this issue The editor is here to answer the questions for all users. Let’s take a look at the content shared in today’s software tutorial. Tutorial for switching Excel to Chinese: 1. Enter the software and click the "File" option on the left side of the toolbar at the top of the page. 2. Select "options" from the options given below. 3. After entering the new interface, click the “language” option on the left
Detailed explanation of obtaining administrator rights in Win11
Mar 08, 2024 pm 03:06 PM
Windows operating system is one of the most popular operating systems in the world, and its new version Win11 has attracted much attention. In the Win11 system, obtaining administrator rights is an important operation. Administrator rights allow users to perform more operations and settings on the system. This article will introduce in detail how to obtain administrator permissions in Win11 system and how to effectively manage permissions. In the Win11 system, administrator rights are divided into two types: local administrator and domain administrator. A local administrator has full administrative rights to the local computer
Will wwe2k24 have Chinese?
Mar 13, 2024 pm 04:40 PM
"WWE2K24" is a racing sports game created by Visual Concepts and was officially released on March 9, 2024. This game has been highly praised, and many players are eagerly interested in whether it will have a Chinese version. Unfortunately, so far, "WWE2K24" has not yet launched a Chinese language version. Will wwe2k24 be in Chinese? Answer: Chinese is not currently supported. The standard version of WWE2K24 in the Steam Chinese region is priced at 199 yuan, the deluxe version is 329 yuan, and the commemorative edition is 395 yuan. The game has relatively high configuration requirements, and there are certain standards in terms of processor, graphics card, or running memory. Official recommended configuration and minimum configuration introduction:
balatro settings Chinese method
Mar 07, 2024 pm 09:10 PM
The default language of the balatro game is English, but players can set the language to Chinese in Steam. Some players still don’t know how to set it. Here is how to set balatro to Chinese. How to set up balatro in Chinese 1. First open Steam, click on the library, find balatro, right-click and select properties. 2. You can see the language in the properties interface, click to enter the language setting interface. 3. Players can set the language of the game to Simplified Chinese or other languages. 4. Afterwards, players need to restart Steam, and then enter the game to see that it is already in Chinese. The above is how to set Chinese in balatro. It is relatively simple. Players can try it.
