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 相关文章推荐
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
使用Vue实现简单计算器
Feb 25 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 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-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
2016/11/17 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
select自定义小三角样式代码(实用总结)
2017/08/18 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python实现京东秒杀功能代码
2019/05/16 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python如何构建mock接口服务
2021/01/28 Python
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
《雷雨》教学反思
2014/02/20 职场文书
矿泉水广告词
2014/03/20 职场文书
专家推荐信模板
2014/05/09 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
企业党支部工作总结2015
2015/05/21 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript