vue实现虚拟列表功能的代码


Posted in Javascript onJuly 28, 2020

当数据量较大(此处设定为10w),而且要用列表的形式展现给用户,如果我们不做处理的话,在浏览器中渲染10w dom节点,是极其耗费时间的,那我的Macbook air举例,10w条数据渲染出来到能看到页面,需要13秒多(实际应该是10秒左右),如果是用户的话肯定是不会等一个网页十几秒的

vue实现虚拟列表功能的代码

我们可以用虚拟列表解决这个问题
一步步来
首先看一下效果

vue实现虚拟列表功能的代码

这是data中的数据

data() {
  return {
   list: [], // 贼大的数组
   li: {
    // 列表项信息
    height: 50,
   },
   container: {
    // 容器信息
    height: 500,
   },
   pos: 1, // 第一排显示的元素的下标
   MAX_NUM: 1, // 在容器内最多显示几个列表项
   timer: null, // 定时器
   carriedOut: true, // 能不能执行操作
  };
 },

然后在mounted中创建一个贼大的数组,在调用test方法计算第一次的虚拟列表中有哪些

mounted() {
  // 创建一个贼大的数据数组
  for (let i = 0; i < 100000; i++) {
   this.list.push(i);
  }
  this.test();
 },

test方法

test() {
   // 节流
   if (this.carriedOut) {
    // 容器跟里面的列表项
    const { container, li } = this;
    // 计算可视区域最多能显示多少个li
    this.MAX_NUM = Math.ceil(container.height / li.height);
    // 获取 overflow:scroll 的元素已滚动的高度
    let scrollTop = this.$refs.container.scrollTop;
    // 计算当前处于第一排的元素的下标
    this.pos = Math.round(scrollTop / li.height);
    // 下方节流操作
    this.carriedOut = false;
    this.timer = setTimeout(() => {
     this.carriedOut = true;
     clearTimeout(this.timer);
    }, 50);
   }
  },

然后是computed

computed: {
  // 用于渲染在页面上的数组
  showList() {
   // 根据计算出来的 第一排元素的下标,和最多显示多少个 用slice实现截取数组
   let arr = this.list.slice(this.pos, this.pos + this.MAX_NUM);
   return arr;
  },
 },

这是html,注意监听了div的scroll事件,并且调用的是test方法

<div class="virtual-list">
  <h1>虚拟列表</h1>
  <div class="container" ref="container" :style="`height:${container.height}px`" @scroll="test">
   <ul :style="`height:${li.height*list.length}px;padding-top:${li.height*pos}px`">
    <li :style="`height:${li.height}px`" v-for="item in 100000" :key="item">{{item}}</li>
   </ul>
  </div>
 </div>

完整源代码

<template>
 <div class="virtual-list">
  <h1>虚拟列表</h1>
  <div class="container" ref="container" :style="`height:${container.height}px`" @scroll="test">
   <ul :style="`height:${li.height*list.length}px;padding-top:${li.height*pos}px`">
    <li :style="`height:${li.height}px`" v-for="item of showList" :key="item">{{item}}</li>
   </ul>
  </div>
 </div>
</template>

<script>
export default {
 data() {
  return {
   list: [], // 贼大的数组
   li: {
    // 列表项信息
    height: 50,
   },
   container: {
    // 容器信息
    height: 500,
   },
   pos: 1, // 第一排显示的元素的下标
   MAX_NUM: 1, // 在容器内最多显示几个列表项
   timer: null, // 定时器
   carriedOut: true, // 能不能执行操作
  };
 },
 mounted() {
  // 创建一个贼大的数据数组
  for (let i = 0; i < 1000; i++) {
   this.list.push(i);
  }
  this.test();
 },
 computed: {
  // 用于渲染在页面上的数组
  showList() {
   // 根据计算出来的 第一排元素的下标,和最多显示多少个 用slice实现截取数组
   let arr = this.list.slice(this.pos, this.pos + this.MAX_NUM);
   return arr;
  },
 },
 methods: {
  test() {
   // 节流
   if (this.carriedOut) {
    // 容器跟里面的列表项
    const { container, li } = this;
    // 计算可视区域最多能显示多少个li
    this.MAX_NUM = Math.ceil(container.height / li.height);
    // 获取 overflow:scroll 的元素已滚动的高度
    let scrollTop = this.$refs.container.scrollTop;
    // 计算当前处于第一排的元素的下标
    this.pos = Math.round(scrollTop / li.height);
    // 下方节流操作
    this.carriedOut = false;
    this.timer = setTimeout(() => {
     this.carriedOut = true;
     clearTimeout(this.timer);
    }, 50);
   }
  },
 },
};
</script>

<style lang="scss" scoped>
.virtual-list {
 text-align: center;
 .container {
  overflow: scroll;
  border: 1px solid red;
 }
}
</style>

到此这篇关于vue实现虚拟列表功能的代码的文章就介绍到这了,更多相关vue 虚拟列表内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery index()方法使用代码
Jun 02 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 #Javascript
Vue2.0 $set()的正确使用详解
Jul 28 #Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 #Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 #Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 #Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 #Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 #Javascript
You might like
php实现快速排序法函数代码
2012/08/27 PHP
PHP中的Memcache详解
2014/04/05 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
Python部署web开发程序的几种方法
2017/05/05 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
大学团支书的自我评价分享
2013/12/14 职场文书
网上蛋糕店创业计划书
2014/01/24 职场文书
质量管理标语
2014/06/12 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
毕业赠语大全
2015/06/23 职场文书
安全教育主题班会教案
2015/08/12 职场文书
信息技术国培研修日志
2015/11/13 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Python实现信息管理系统
2022/06/05 Python