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 相关文章推荐
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
el-table树形表格表单验证(列表生成序号)
May 31 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
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
php 静态变量的初始化
2009/11/15 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
必备的JS调试技巧汇总
2016/07/20 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
详解React 16 中的异常处理
2017/07/28 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python mysqldb连接数据库
2009/03/16 Python
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
解决python报错MemoryError的问题
2018/06/26 Python
浅谈django orm 优化
2018/08/18 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
python向图片里添加文字
2019/11/26 Python
如何使用python传入不确定个数参数
2020/02/18 Python
django在开发中取消外键约束的实现
2020/05/20 Python
python支持多继承吗
2020/06/19 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Foreo国际站:Foreo International
2018/10/29 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
图书室管理制度
2014/01/19 职场文书
装修设计师求职信
2014/02/26 职场文书
人事科岗位职责范本
2014/03/02 职场文书
留学推荐信怎么写
2015/03/26 职场文书
入团申请书格式
2019/06/20 职场文书
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python