一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解
开发中总会遇到这种下拉加载的设计方案,Vue实现下拉加载最佳方案自然是使用vue-infinite-scroll来实现。接下来我们一起看下它的配置及使用方式。
首先我们先了解下他的配置参数:
- v-infinite-scroll="loadMore"表示回调函数是loadMore
- infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙的时候是不执行的。
- infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数,10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance的值即可。
- infinite-scroll-immediate-check 默认值为true,该指令表示,应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。
- infinite-scroll-listen-for-event 当事件在Vue实例中发出时,无限滚动将再次检查。
- infinite-scroll-throttle-delay 检查busy的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查busy的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行
安装vue-infinite-scroll
npm install vue-infinite-scroll --save
在Vue项目中引入 vue-infinite-scroll
你可以选择全局引入:
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
或者在单个组件中使用:
import infiniteScroll from 'vue-infinite-scroll'
export default {
directives: { infiniteScroll }
}
在实际开发组件中的调用
js部分:
为了便于测试可以使用官网案例进行演示:
<div v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div v-for="item in data" :key="item.index">{{item.name}}</div>
</div> data () {
return {
count: 0,
data: [],
busy: false
}
},
methods: {
loadMore: function() {
this.busy = true
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({name: this.count++ })
}
console.log(this.data)
this.busy = false
}, 1000)
}
}
注意:
- 如果要用数据对容器进行填充,那么必须设置容器高度 也可以是屏幕高度,不然无法触发loadMore事件
- 在进行异步请求之前,需要调用this.busy= true, 数据请求完成后 再设置 this.busy = false(放在axios请求的外面,避免不断重复加载的现象)
一个超详细vue无限滚动vue-infinite-scroll插件的配置及使用详解的更多相关文章
- 超详细的Tensorflow模型的保存和加载(理论与实战详解)
1.Tensorflow的模型到底是什么样的? Tensorflow模型主要包含网络的设计(图)和训练好的各参数的值等.所以,Tensorflow模型有两个主要的文件: a) Meta graph: ...
- 全网最详细的Windows系统里PLSQL Developer 64bit安装之后的一些配置(图文详解)
不多说,直接上干货! 注意的是: 本地若没有安装Oracle服务端,Oracle server服务端64位,是远程连接,因此本地配置PLSQL Developer64位. PLSQL Develope ...
- vue 无限滚动问题
如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页.那么今天就看看如何在Vue-Cli中实现这个功能. 当前找到两个插件 1 el ...
- vue2.0无限滚动加载数据插件
做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...
- Vue.js 源码分析(十三) 基础篇 组件 props属性详解
父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- 041——VUE中组件之pros数据的多种验证机制实例详解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Kotlin——最详细的抽象类(abstract)、内部类(嵌套类)详解
如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索QQ群号:497071402 进入正题 在前面几个章节中,详 ...
- 全网最详细的Sublime Text 3的安装Package Control插件管理包(图文详解)
不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...
随机推荐
- 普通帐号起redis
wget http://download.redis.io/releases/redis-4.0.11.tar.gz $ tar xzf redis-4.0.11.tar.gzmv redis-4.0 ...
- webpack的介绍
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA5EAAAGpCAIAAACbBiUBAAAgAElEQVR4Aey9CVwb553/L04JcSPuw5
- 使用Koa.js离不开这十个中间件
随着ES6的普及,async/await的语法受到更多JS开发者的青睐,Koa.js作为比较早支持使用该语法的Node框架越来越受到大家的喜爱,虽然Koa.js本身支持的功能很有限,但官方和社区提供了 ...
- linux VMware 提供的网络连接有 5 种详细讲述
VMware 提供的网络连接有 5 种,分别是"桥接模式"."NAT 模式"."仅主机模式"."自定义"和"L ...
- const关键字 C与C++分析
1 C与C++的区别 1.1.C允许定义两个变量名相同的变量,而C++不允许. 在C语言中是允许定义两个名字相同的全局变量. 在C++中是不允许定义两个名字相同的全局变量. 测试代码: /* 编译环 ...
- .net core 2.2.0 SOAP踩坑
首先确认下面几个程序集是最新版本: <PackageReference Include="System.ServiceModel.Http" Version="4. ...
- 2019-11-29-C#-在-8.0-对比-string-和-string_-的类型
title author date CreateTime categories C# 在 8.0 对比 string 和 string? 的类型 lindexi 2019-11-29 8:59:0 + ...
- Wiki 安装部署
#首先登陆进入 MySQL 数据库 [root@oldboy tools]# mysql -uroot -poldboy123 #创建一个 wiki 是库 mysql> create datab ...
- zabbix修改默认字体
在zabbixweb界面里有时候显示界面为框框 所以修改默认字体 现在windows里 随便找个字体: win+R 搜fonts 然后随便复制了一个字体,传到zabbix服务器里 cp calib ...
- SSL交互简述及nginx双向认证配置
一.证书生成. 1.SSL Server生成私钥/公钥对.server.key(加密)/server.pub(解密):2.server.pub生成请求文件server.csr,包含server的一些信 ...