【Vue.js】加载更多—vue-infinite-scroll
引言
今天用到了一个加载更多的插件,用起来很方便,插件的名字叫做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的更多相关文章
- 笔记-VUE滚动加载更多数据
来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...
- flask加vue 动画 加载更多
曾经使用flask_paginate(地址:https://blog.csdn.net/qq_42239520/article/details/80378095)进行分页,现在又想新的想法,怎么才能和 ...
- vue+better-scroll 下拉刷新,上拉加载更多
better-scroll 来做下拉刷新和 上拉加载 特别方便. 安装好vue脚手架和better-scroll 之后 直接复制粘贴就可以看到效果了 <template> <div ...
- js实现『加载更多』功能实例
DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 1. 调用系统的API,系统有提供下拉刷新的API接口 2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个binds ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多
http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...
随机推荐
- linux学习历程-不熟悉的linux命令
一:man(执行查看帮助命令) 二:常用的系统工作命令 1:echo echo命令用于显示在终端输出字符串或变量提取后的值,格式“echo [字符串]|[$变量]” 2:date 用于显示系统的时间和 ...
- cadence元件放置方法
在导入网表之后,需要放置元件,介绍几种常见的放置元件的方法和常用的几种元件操作方法.
- tomcat +jenkios
来源:https://www.cnblogs.com/edward2013/p/5269465.html 1. 安装JDK JDK下载地址: http://www.oracle.com/techne ...
- spring的配置和使用
spring的配置和使用 1. 创建基于java的配置. 配置极少量的XML来启用java配置: <?xml version="1.0" encoding="U ...
- js高级3
1.解决函数内this的指向 可以在函数外提前声明变量_this/that=this 通过apply和call来修改函数内的this指向 (1)二者区别 用法是一样的,就是参数形式不一样 ...
- 微信小程序开发-tabbar组件
"tabBar": { "backgroundColor": "#303133", "color": "#ff ...
- SQL Server 恢复数据库至指定时间点
发生数据库误删的情况下,及时恢复数据到误操作前的状态 工具/原料 SQL Server Management Studio 数据库完整备份及日志备份 必备条件 1 数据库右键属性,在选项中查看 ...
- Python学习:类和实例
Python学习:类和实例 本文作者: 玄魂工作室--热热的蚂蚁 类,在学习面向对象我们可以把类当成一种规范,这个思想就我个人的体会,感觉很重要,除了封装的功能外,类作为一种规范,我们自己可以定制的规 ...
- 解决localdb中文智能的问题
declare @database nvarchar(100) declare tmpCur cursor for select DB_NAME() open tmpCur fetch next fr ...
- 脚本语言丨Batch入门教程第四章:调用与传参
今天是Batch入门教程的最后一章内容:调用与传参.相信通过前面的学习,大家已经掌握了Windows Batch有关的基础知识和编程方法,以及利用Windows Batch建立初级的编程思维方式.今后 ...