引言

今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做vue-infinite-scroll

我们可以去npmjs.com官网看一下这个vue-infinite-scroll的用法,官网上面写的已经很简单易懂的了。

安装

npm install vue-infinite-scroll --save

引入

官网介绍了三种引入该插件的方式,分别是Common js方式(require("XXXX")) 、 ES6语法方式(import xxx from xxx)、 还有直接<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>

我的是vue项目,使用的是ES6语法,当然是用ES6语法方式导入啦。

上面安装成功之后,在main.js文件下引入该插件,输入下面的代码

import VueLazyLoad from 'vue-lazyload'

Vue.use(infiniteScroll)

使用

官网上面已经给出了例子,如下:

1)首先下面这段官网给出的div的DOM元素放在你<template><div></div></template>的任意地方,都没问题哒!

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>

2)因为要通过busy变量来控制infinite-scroll-disabled(无线滚动禁止)属性,你可能会问,啥子叫无线滚动禁止属性丫???

那么你就要先知道dom里面的infinite-scroll-distance="10"是用来干嘛的?

infinite-scroll-distance这个属性,叫无线滚动间距,顾名思义,就是规定滑动条与列表外层div的底部的距离,假如infinite-scroll-distance=“10”,就是说,滚动条距离外层div底部的距离如果低于或者等于10,就会无限次数出发loadMore事件!!!!!

那怎么控制它不要无线触发loadMore事件呢,就是靠infinite-scroll-disabled(无线滚动禁止)属性来控制,false就是不禁止,true就是禁止的意思。

例子

看下面例子:

<script>
export default {
data () {
return {
page: 1,
pageSize: 8,
// 加载更多属性
busy: true// 无线滚动禁用
}
}, mounted () {
this.getGoodsList()
},
methods: {
// 获取商品列表
getGoodsList (flag) {
let param = {
page: this.page,
pageSize: this.pageSize,
sort: this.sortFlag ? 1 : -1
}
this.http.get('/goods', {params: param}).then((response) => {
let res = response.data
if (res.status === '0') {
// flag === true,证明是第二次或第二次以上加载数据了
if (flag) {
this.goodsList = this.goodsList.concat(res.result.list) // 数据追加
this.busy = false // 无线滚动禁止 取消,意思就是开启无限滚动监听
if (res.result.list.length === 0) {
this.busy = true // 无线滚动禁止 启动
} else {
this.busy = false // 无线滚动禁止 取消
}
} else { // 第一次加载数据
this.goodsList = res.result.list
this.busy = false // 无线滚动禁止 取消
}
} else { // 接口调用异常
this.goodsList = []
}
})
},
// 加载更多
loadMore () {
this.busy = true // 无线滚动禁止
setTimeout(() => {
this.page++
this.getGoodsList(true) // 调用获取商品的接口
}, 500)
}
}
}
</script>

注意

值得注意的是,为什么要在loadMore里面,再调用接口的时候,加了个延迟函数,并设延迟500ms呢?

我也不明白~~

这500ms的时间差,作用是,当你能够无线滚动禁止设为 false的时候,当滚动条间距与底部相差10的时候,它会就无限制的调用loadMore函数,并且已500ms的时间差进行无线循环请求。

其实不要这个setTimeout函数也是可以的,只要我们合理的控制busy的true与false,就能够很好地控制请求的次数,实现加载更多的功能,像上面的例子一样!

之前也有讲过另外两种加载更多的实现,有兴趣的小伙伴可以跳转查阅

---end---

【Vue.js】加载更多—vue-infinite-scroll的更多相关文章

  1. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  2. flask加vue 动画 加载更多

    曾经使用flask_paginate(地址:https://blog.csdn.net/qq_42239520/article/details/80378095)进行分页,现在又想新的想法,怎么才能和 ...

  3. vue+better-scroll 下拉刷新,上拉加载更多

    better-scroll 来做下拉刷新和 上拉加载 特别方便.  安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...

  4. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  5. 微信小程序实战篇-下拉刷新与加载更多

    下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...

  6. PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载

    这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...

  7. Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多

    http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...

  8. PHP+Ajax点击加载更多列表数据实例

    一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...

  9. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

随机推荐

  1. xampp访问phpmyadmin访问不了

    我的xampp版本是xampp-linux-x64-5.6.15-2-installer.run, 浏览器输入“我的ip/phpmyadmin”出现如下问题: Access forbidden! Ne ...

  2. 小白学习随笔the first week

    The First Week 一.计算机基础 1.软件(应用程序) 2.解释器/编译器 - 解释型语言:将代码每一行传递给计算机一行,常用编程语言python,PHP,Ruby. - 编译型语言:将代 ...

  3. javascript 变量的引入、变量的声明、变量的初始化

    变量的引入及声明和初始化: 变量: 操作的数据都是在内存中操作 Js中存储数据使用变量的方式(名称,值--->数据) Js中声明变量都用var--->存储数据,数据应该有对应的数据类型 存 ...

  4. MongoDB 学习使用

    博客教程: https://jingyan.baidu.com/article/dca1fa6f0428a4f1a440522e.html

  5. vs2012,打开早期版本窗体错误

    <runtime>  <NetFx40_LegacySecurityPolicy enabled="true"/></runtime>

  6. Linux系统如何添加IP别名

    IP别名可以在一块物理网卡上绑定多个IP地址,这样就能够在使用单一网卡的同一个服务器上运行多个基于IP的虚拟主机,简单来说,IP别名就是一张物理网卡上配置多个IP,实现类似子接口之类的功能. 那么IP ...

  7. JavaScript 深拷贝(deep copy)和浅拷贝(shallow copy)

    参考: [进阶4-1期]详细解析赋值.浅拷贝和深拷贝的区别 How to differentiate between deep and shallow copies in JavaScript 在编程 ...

  8. ucore代码分析

    lab2: 总共分为四个包一个文件,分别为: boot: 操作系统加载程序代码 kern: 操作系统内核代码 libs: 相关的库和数据结构 tools: 相关编译链接调试工具 Makefile: 构 ...

  9. k8s probe

    livenessProbe: httpGet: path: /abc/401 port: 8384 scheme: HTTP

  10. 2018申请淘宝客AppKey

    1.www.alimama.com 申请账号进入后2.进入我的联盟,按下面的步骤 完成以后等待网站审核. 3.审核完成后 按以下的图,申请进入开放平台或得appkey 4.最后就可以进入开放平台申请看 ...