引言

今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做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. javafx之CSS初探

    文档:http://www.haogongju.net/art/1807238 javafx中的css元素必须有-fx-前缀. 一.介绍 java8中新增了javafx.css开放了css相关api. ...

  2. Machine Learning in Action &ndash; PCA和SVD

    降维技术, 首先举的例子觉得很好,因为不知不觉中天天都在做着降维的工作 对于显示器显示一个图片是通过像素点0,1,比如对于分辨率1024×768的显示器,就需要1024×768个像素点的0,1来表示, ...

  3. colorAccent、colorPrimary、colorPrimaryDark actionbar toolbar navigationbar

    伴随着Android5.0的发布也更新了support-v7-appcompat 到V21,其中增加了ToolBar.recyclerview.cardview等控件. Android5.0对改变AP ...

  4. 大约sql声明优化

    最近做的mysql数据库优化,并sql声明优化指南.我写了一个小文件.这种互相鼓励有关! 数据库参数获得的性能优化升级都在一起只占数据库应用系统的性能改进40%左右.其余60%的系统性能提升所有来自相 ...

  5. Linux常用使用技巧

    一.如何实时查看linux下的日志 cat /var/log/*.log 如果日志在更新,如何实时查看 tail -f /var/log/messages 还可以使用 watch -d -n 1 ca ...

  6. mobile_缩放

    document.documentElement.clientWidth       不包含滚动条 window.innerWidth                                  ...

  7. linux安装elasticsearch及遇到的各种问题

    1.获取elasticsearch https://www.elastic.co/downloads/elasticsearch 终端输入赋值的下载链接进行下载 wget https://artifa ...

  8. 三.mysql表的完整性约束

    mysql表的完整性约束 什么是约束 not null    不能为空的 unique      唯一 = 不能重复 primary key 主键 = 不能为空 且 不能重复 foreign key ...

  9. 20155313 杨瀚 《网络对抗技术》实验九 Web安全基础

    20155313 杨瀚 <网络对抗技术>实验九 Web安全基础 一.实验目的 本实践的目标理解常用网络攻击技术的基本原理.Webgoat实践下相关实验. 二.基础问题回答 1.SQL注入攻 ...

  10. mysql日志详解

    日志分类: 一.错误日志. 1.在配置文件中的配置是:log-error="DESKTOP-igoodful.err",查看参数的键值对:show variables like ' ...