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 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
js实现常用排序算法
Aug 09 Javascript
Javascript实现登录记住用户名和密码功能
Mar 22 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 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
php获取访问者IP地址汇总
2015/04/24 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
学习vue.js计算属性
2016/12/03 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
面试后的感谢信范文
2014/02/01 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
欠款证明
2015/06/24 职场文书