使用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 相关文章推荐
jquery $.each() 使用小探
Aug 23 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
Javascript 解疑
2009/11/11 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
Layui给switch添加响应事件的例子
2019/09/03 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python 装饰器深入理解
2017/03/16 Python
Python冲顶大会 快来答题!
2018/01/17 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
python处理数据,存进hive表的方法
2018/07/04 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
留学自荐信
2013/10/10 职场文书
社团成立邀请函
2014/01/08 职场文书
《在家里》教后反思
2014/03/01 职场文书
交通事故协议书范文
2014/04/16 职场文书
论文评语大全
2014/04/29 职场文书
机关党员公开承诺书
2014/08/30 职场文书
入股协议书范本
2014/11/01 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS