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 相关文章推荐
JavaScript中“基本类型”之争小结
Jan 03 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
vue项目实现图片上传功能
Dec 23 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连接access数据库
2008/03/27 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
PHP数组内存利用率低和弱类型详细解读
2017/08/10 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
javascript处理table表格的代码
2010/12/06 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
详解Node全局变量global模块
2017/09/28 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
python利用hook技术破解https的实例代码
2013/03/25 Python
Python变量和数据类型详解
2017/02/15 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python基于time模块表示时间常用方法
2020/06/18 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
深入浅析python 中的self和cls的区别
2020/06/20 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
技校教师求职简历的自我评价
2013/10/20 职场文书
网络教育自我鉴定
2013/11/01 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
办理房产过户的委托书
2014/09/14 职场文书
2015年十月一日放假通知
2015/08/18 职场文书