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
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 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:
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> <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>  </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>  </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-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!

UniApp实现支付功能的接入与使用说明随着移动支付的普及,很多应用都需要集成支付功能,以方便用户进行在线支付。UniApp作为一种基于Vue.js的跨平台开发框架,具有一次开发多平台使用的特点,可以轻松地实现支付功能的接入。本文将介绍UniApp中如何接入支付功能,并给出代码示例。一、支付功能的接入在App端的manifest.json文件中添加支付权限:

1、降噪模式和通透模式切换长捏耳机柄约1秒钟,可在降噪模式和通透模式之间切换。2、音乐模式单次按捏耳机柄,可暂停或播放音乐两次按捏耳机柄,可播放下一首三次按捏耳机柄,可播放上一首或唤醒语音。3、通话模式通话状态下,单次按捏耳机柄,可接听或挂断电话。4、如何重置打开耳机盒,当充电盒指示灯闪烁红灯5次后,松开按键,耳机重置完毕。三、怎么连接手机1、打开充电盒2、长按设置按键2秒3、待手机屏幕出现弹窗,单击确认连接。四、怎么查看电量情况1、当耳机连接手机时,可在手机屏幕弹窗中查看耳机及充电盒电量。2、

如何使用Hyperf框架进行多语言处理引言:随着互联网的全球化,多语言处理成为了很多应用程序开发的必备技能。在Web应用开发中,如果能够支持多语言是非常重要的,因为它可以帮助你更好地满足不同用户的需求。本文将介绍如何使用Hyperf框架进行多语言处理,并提供具体的代码示例。安装Hyperf框架首先,我们需要安装Hyperf框架。可以使用composer命令来

uniapp中如何使用视频录制功能今天,笔者将向大家介绍如何在uniapp开发框架中使用视频录制功能。uniapp是一款跨平台的开发框架,我们可以在一次编写的代码基础上,同时在多个平台中运行我们的应用程序,这对于开发者来说非常方便。在uniapp中,我们可以使用uni-AD-IN摄像头组件来实现视频录制的功能。首先,我们需要在uniapp项目中安装uni-

cookies是一种常见的网络技术,用于存储用户在网站上的个人偏好和行为信息。在今天的数字化时代,几乎所有的网站都使用cookies来提供个性化和更好的用户体验。本文将详细介绍cookies的使用说明,帮助用户更好地理解和掌握这一技术。首先,我们来了解一下cookies的基本概念。Cookies是网站在用户浏览器上存储的小型文本文件,包含有关用户访问网站的一

如何使用高级筛选功能筛选数据在日常工作中,对大量数据进行筛选是一项非常常见和重要的任务。而常规的筛选功能可能无法满足对数据更精确、更复杂的筛选需求。为了解决这个问题,许多办公软件都提供了高级筛选功能,可以帮助用户更高效地筛选数据。本文将介绍如何使用高级筛选功能来对数据进行筛选。第一步:准备数据在使用高级筛选功能之前,首先需要准备好待筛选的数据。确保数据已经整

win7系统跟其他的windows系统一样都是需要激活才能使用全部的功能的。那么如何激活win7呢?常用的方法就是借助win7激活码或者win7激活工具,而比较好用的就是win7activation激活工具了。下面小编给大家介绍下win7activation激活工具使用方法。具体的方法如下:1、首先网上下载“WIN7Activation”(Win7激活工具),把程序拷贝到电脑上,双击打开它。2、然后直接点击:激活,变会自动开始激活状态。3、程序激活win7系统完成后,弹出提示,点击:是。4、重启

随着JavaScript在Web应用程序中的广泛使用,理解JavaScript中引用类型的使用变得非常重要。引用类型在Javascript中是一种特殊的数据类型,它引用了一个对象,这个对象可能是另一个简单数据类型,也可能是一个对象或者数组。在本文中,我们将介绍Javascript中引用类型的概念及其使用方法。引用类型的定义和使用Javascript中的引用类


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

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

SublimeText3 Linux new version
SublimeText3 Linux latest version

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version
Useful JavaScript development tools

SublimeText3 English version
Recommended: Win version, supports code prompts!
