开发中总会遇到这种下拉加载的设计方案,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插件的配置及使用详解的更多相关文章

  1. 超详细的Tensorflow模型的保存和加载(理论与实战详解)

    1.Tensorflow的模型到底是什么样的? Tensorflow模型主要包含网络的设计(图)和训练好的各参数的值等.所以,Tensorflow模型有两个主要的文件: a) Meta graph: ...

  2. 全网最详细的Windows系统里PLSQL Developer 64bit安装之后的一些配置(图文详解)

    不多说,直接上干货! 注意的是: 本地若没有安装Oracle服务端,Oracle server服务端64位,是远程连接,因此本地配置PLSQL Developer64位. PLSQL Develope ...

  3. vue 无限滚动问题

    如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页.那么今天就看看如何在Vue-Cli中实现这个功能. 当前找到两个插件 1 el ...

  4. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  5. Vue.js 源码分析(十三) 基础篇 组件 props属性详解

    父组件通过props属性向子组件传递数据,定义组件的时候可以定义一个props属性,值可以是一个字符串数组或一个对象. 例如: <!DOCTYPE html> <html lang= ...

  6. Vue基础语法-数据绑定、事件处理和扩展组件等知识详解(案例分析,简单易懂,附源码)

    前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...

  7. 041——VUE中组件之pros数据的多种验证机制实例详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Kotlin——最详细的抽象类(abstract)、内部类(嵌套类)详解

    如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索QQ群号:497071402 进入正题 在前面几个章节中,详 ...

  9. 全网最详细的Sublime Text 3的安装Package Control插件管理包(图文详解)

    不多说,直接上干货! 全网最详细的Windows里下载与安装Sublime Text *(图文详解) 全网最详细的Sublime Text 3的激活(图文详解) 全网最详细的Sublime Text ...

随机推荐

  1. Oracle恢复ORA-00600: 内部错误代码, 参数: [kcratr_scan_lastbwr] 问题的简单解决

    Oracle恢复ORA-00600: 内部错误代码, 参数: [kcratr_scan_lastbwr] 1. 简单处理 sqlplus / as sysdba startup mount recov ...

  2. cannot convert from pointer to base class 'QObject' to pointer to derived class 'subClass' via virtual base 'baseClass'

    QT 编译不过的另一个问题: 1. 新建一个console工程 QT -= gui CONFIG += c++ console CONFIG -= app_bundle # The following ...

  3. adb 打印kernel输出的log

     一. linux 内核printk机制     1.1. Android内核是基于Linxu kernel的,因此其log机制也是通用的,在Android内核中使用printk函数进行Log输出.与 ...

  4. Python 把较长的一行代码分成多行的技巧

    概述:在写代码过程中,经常遇到一行代码很长的情况.为了让代码显得整齐干净,就需要把一行代码分成多行来写,Python中有三种小技巧可以实现该功能:        1.用反斜杠\链接多行代码 示例:   ...

  5. webpack入门学习手记(一)

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  6. 2018icpc宁夏邀请赛_L_Continuous Intervals

    题意 给定一个序列,定义连续区间为区间的数排序后,任意两个相邻的数之差不超过1. 分析 假设区间最大值为\(max\),最小值为\(min\),不同数个数为\(cnt\),那么问题转化为求满足\(ma ...

  7. Python类函数调用:missing 1 required positional argument

    在Python中,应该先对类进行实例化,然后在应用类.注意,实例化的过程是应该加括号的.

  8. js变量的作用域与函数作用域

    引自 1. 变量的作用域(var与let的区别) 在函数之外声明的变量,叫做全局变量,因为它可被当前文档中的任何其他代码所访问.在函数内部声明的变量,叫做局部变量,因为它只能在当前函数的内部访问. E ...

  9. nginx的rewrite

    nginx服务的rewrite nginx后端服务的指令 1)upstream指令 :设置后端服务器组的主要指令 Upstream name {} 2)server指令:用于设定组内的服务器 3)Ip ...

  10. ThinkCMF5.1虚拟机下安装的问题,已成功

    官方的解决方案:https://www.kancloud.cn/thinkcmf/faq/1197179 按它的提示,发现阿里云的虚拟主机htdoc同级的目录没有上传权限. 只能把“ThinkCMF文 ...