使用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中使用inline函数的问题
Mar 08 Javascript
List all the Databases on a SQL Server
Jun 21 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js控制frameSet示例
Sep 10 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
js实现右键自定义菜单
Dec 03 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
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生成静态页面详解
2006/12/05 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP实现将视频转成MP4并获取视频预览图的方法
2015/03/12 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
利用js canvas实现五子棋游戏
2020/10/11 Javascript
使用 Python 获取 Linux 系统信息的代码
2014/07/13 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
法人委托书范本格式
2014/09/15 职场文书
初中毕业生自我评价
2015/03/02 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
Python中X[:,0]和X[:,1]的用法
2021/05/10 Python
基于Python编写一个监控CPU的应用系统
2022/06/25 Python