引言

今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做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. linux学习历程-不熟悉的linux命令

    一:man(执行查看帮助命令) 二:常用的系统工作命令 1:echo echo命令用于显示在终端输出字符串或变量提取后的值,格式“echo [字符串]|[$变量]” 2:date 用于显示系统的时间和 ...

  2. cadence元件放置方法

    在导入网表之后,需要放置元件,介绍几种常见的放置元件的方法和常用的几种元件操作方法.

  3. tomcat +jenkios

    来源:https://www.cnblogs.com/edward2013/p/5269465.html 1. 安装JDK JDK下载地址:  http://www.oracle.com/techne ...

  4. spring的配置和使用

    spring的配置和使用 1. 创建基于java的配置. 配置极少量的XML来启用java配置:   <?xml version="1.0" encoding="U ...

  5. js高级3

    1.解决函数内this的指向 可以在函数外提前声明变量_this/that=this 通过apply和call来修改函数内的this指向 (1)二者区别 用法是一样的,就是参数形式不一样        ...

  6. 微信小程序开发-tabbar组件

    "tabBar": { "backgroundColor": "#303133", "color": "#ff ...

  7. SQL Server 恢复数据库至指定时间点

    发生数据库误删的情况下,及时恢复数据到误操作前的状态 工具/原料   SQL Server Management Studio 数据库完整备份及日志备份 必备条件   1 数据库右键属性,在选项中查看 ...

  8. Python学习:类和实例

    Python学习:类和实例 本文作者: 玄魂工作室--热热的蚂蚁 类,在学习面向对象我们可以把类当成一种规范,这个思想就我个人的体会,感觉很重要,除了封装的功能外,类作为一种规范,我们自己可以定制的规 ...

  9. 解决localdb中文智能的问题

    declare @database nvarchar(100) declare tmpCur cursor for select DB_NAME() open tmpCur fetch next fr ...

  10. 脚本语言丨Batch入门教程第四章:调用与传参

    今天是Batch入门教程的最后一章内容:调用与传参.相信通过前面的学习,大家已经掌握了Windows Batch有关的基础知识和编程方法,以及利用Windows Batch建立初级的编程思维方式.今后 ...