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 相关文章推荐
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
javascript处理table表格的代码
Dec 06 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Angular2库初探
Mar 01 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
angular4中引入echarts的方法示例
Jan 29 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
基于mysql的bbs设计(五)
2006/10/09 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
理解javascript模块化
2016/03/28 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python人人网登录应用实例
2014/09/26 Python
python实现合并两个数组的方法
2015/05/16 Python
python调用系统ffmpeg实现视频截图、http发送
2018/03/06 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
幼儿教师国培感言
2014/02/19 职场文书
工作失职检讨书范文
2015/05/05 职场文书
生死抉择观后感
2015/06/09 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
送给自己的励志语句:要安静的优秀,悄无声息的坚强
2019/11/26 职场文书
react antd实现动态增减表单
2021/06/03 Javascript
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers