使用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 相关文章推荐
自己整理的一个javascript日期处理函数
Oct 16 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 Javascript
在Vue项目中使用d3.js的实例代码
May 01 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
Vue 全家桶实现移动端酷狗音乐功能
Nov 16 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
使用Python对Csv文件操作实例代码
2017/05/12 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
详解Flask前后端分离项目案例
2020/07/24 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
人事助理自荐信
2014/02/02 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
十八大标语口号
2014/10/09 职场文书
邀请函怎么写
2015/01/30 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python