Vue实现一个无限加载列表功能


Posted in Javascript onNovember 13, 2018

一个需要判断的地方就是加载中再次触发滚动的时候,不要获取数据。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>列表无限加载</title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  li {
   height: 50px;
   border-bottom: 1px solid #c7c7c7;
   list-style: none;
   line-height: 50px;
   padding-left: 30px;
  }
 </style>
</head>
<body>
 <div id="unlimitedList">
  <ul>
   <li v-for="item in list">{{ item }}</li>
   <li :style="{display: loading ? 'initial' : 'none'}">Loading......</div>
  </ul>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
 <script>
  function fetch(from, size = 20) { // 模拟后台获取数据
   console.log('获取数据 传入: ', { from, size });
   let data = [];
   let total = 98;
   size = Math.min(size, total - from + 1);
   for (let i = 0; i < size; i++) {
    data.push(`列表项${from + i}`);
   }
   let ret = { data, total };
   return new Promise(function (resolve, reject) {
    setTimeout(() => {
     console.log('获取数据 返回: ', ret);
     resolve(ret);
    }, 500);
   })
  }
  new Vue({
   el: '#unlimitedList',
   data: {
    list: [],
    loading: true,  // 数据加载中
    allLoaded: false // 数据已经全部加载
   },
   methods: {
    getData() {
     this.loading = true; // 显示加载中的标识
     fetch(this.list.length + 1).then(res => {
      this.list.splice(this.list.length, 0, ...res.data); // 将新获取到的数据连接到 this.list (vue 能检测到 splice() 函数
      this.loading = false; // 加载结束 取消加载中显示
      if (this.list.length === res.total) {
       this.allLoaded = true;
      }
     })
    },
    onScroll(e) {
     if (this.loading || this.allLoaded) return;
     let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
     let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
     let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
     if (top + vh >= height) { // 滚动到底部
      this.getData(); // 如果已经滚到底了 获取数据
     }
    }
   },
   created() {
    this.getData();
    window.addEventListener('scroll', this.onScroll);
   },
   destroyed () {
    window.removeEventListener('scroll', this.onScroll);
   }
  })
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue实现一个无限加载列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
jQuery创建插件的代码分析
Apr 14 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 #Javascript
vue中slot(插槽)的介绍与使用
Nov 12 #Javascript
vuex的module模块用法示例
Nov 12 #Javascript
React手稿之 React-Saga的详解
Nov 12 #Javascript
基于游标的分页接口实现代码示例
Nov 12 #Javascript
React Hooks的深入理解与使用
Nov 12 #Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 #Javascript
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
JS检测图片大小的实例
2013/08/21 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
Vue实现导航栏菜单
2020/08/19 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
Dyson戴森波兰官网:Dyson.pl
2019/08/05 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014年学习全国道德模范事迹思想汇报
2014/09/15 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
旅游安全责任协议书
2016/03/22 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript
maven依赖的version声明控制方式
2022/01/18 Java/Android