使用vue-infinite-scroll实现无限滚动效果


Posted in Javascript onJune 22, 2018

vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。

https://github.com/ElemeFE/vue-infinite-scroll/

https://www.npmjs.com/package/vue-infinite-scroll

npm i vue-infinite-scroll --save

main.js使用

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
   <div class="loading">加载中...</div>
</div>

1.loadMore是方法,里面是要执行的代码

2.busy的值是true的时候,就不再加载,如果是false就执行加载

3.10表示距离底部为10 的时候就执行loadMore方法

loadMore () {
   this.busy = true
   //把busy置位true,这次请求结束前不再执行
   setTimeout(() => {
    this.page++
    this.getGoodLists(true)
    //调用获取数据接口,并且传入一个true,让axios方法指导是否需要拼接数组。
   }, 500)
  }
getGoodLists (flag) {
   var param = {
    page: this.page,
    pageSize: this.pageSize,
    sort: this.sortFlag ? 1 : -1
   }
   axios.get('/goods', {params: param}).then((response) => {
    let res = response.data
    if (flag) {
     this.goodList = this.goodList.concat(res.result.list)
     //如果是flagtrue,则拼接数组。
     if (res.result.count === 0) {
      this.busy = true
     } else {
      this.busy = false
     }
    } else {
     this.goodList = res.result.list
     this.busy = false
     第一次进来的时候,把busy置位false。执行loadMore的方法
    }
   })
  },

总结

以上所述是小编给大家介绍的使用vue-infinite-scroll实现无限滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript File分段上传
Mar 10 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
详解Node 定时器
Feb 26 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
vue中实现左右联动的效果
Jun 22 #Javascript
JS实现关键词高亮显示正则匹配
Jun 22 #Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 #Javascript
vue中使用element-ui进行表单验证的实例代码
Jun 22 #Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 #Javascript
JavaScript 下载svg图片为png格式
Jun 21 #Javascript
You might like
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
python日志记录模块实例及改进
2017/02/12 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python super的使用方法及实例详解
2019/09/25 Python
python打开使用的方法
2019/09/30 Python
python实现井字棋小游戏
2020/03/04 Python
python爬取抖音视频的实例分析
2021/01/19 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
个人优缺点自我评价
2014/01/27 职场文书
工商局个人工作总结
2015/03/03 职场文书
陪护人员误工证明
2015/06/24 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
导游词之广州陈家祠
2019/10/21 职场文书