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

 更新时间:2020年07月28日 10:39:48   作者:achao_2020  
这篇文章主要介绍了vue实现虚拟列表,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

在这里插入图片描述

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

在这里插入图片描述

这是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 虚拟列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实战基于vue2实现瀑布流的代码实例

    微信小程序实战基于vue2实现瀑布流的代码实例

    瀑布流,又称瀑布流式布局,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部,这篇文章主要介绍了微信小程序实战,基于vue2实现瀑布流,需要的朋友可以参考下
    2022-12-12
  • Vue项目保持element组件同行,设置组件不自动换行问题

    Vue项目保持element组件同行,设置组件不自动换行问题

    这篇文章主要介绍了Vue项目保持element组件同行,设置组件不自动换行问题。具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-02-02
  • Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

    Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解

    计算属性就是 Vue 实例选项中的 computed,computed 的值是一个对象类型,对象中的属性值为函数,而且这个函数没办法接收参数,这篇文章主要介绍了Vue 基础语法之计算属性(computed)、侦听器(watch)、过滤器(filters)详解,需要的朋友可以参考下
    2022-11-11
  • vue 卸载eslint方式

    vue 卸载eslint方式

    这篇文章主要介绍了vue 卸载eslint方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Nuxt.js之自动路由原理的实现方法

    Nuxt.js之自动路由原理的实现方法

    这篇文章主要介绍了Nuxt.js之自动路由原理的实现方法,nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 详解Vue-cli中的静态资源管理(src/assets和static/的区别)

    详解Vue-cli中的静态资源管理(src/assets和static/的区别)

    这篇文章主要介绍了Vue-cli中的静态资源管理(src/assets和static/的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue Element UI 表单自定义校验规则及使用

    Vue Element UI 表单自定义校验规则及使用

    这篇文章主要介绍了Vue Element UI 表单自定义效验规则及使用,文中通过代码介绍了常见表单效验规则,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • electron实现打印功能支持静默打印、无感打印

    electron实现打印功能支持静默打印、无感打印

    使用electron开发应用遇到了打印小票的功能,实现途中还是几经波折,下面这篇文章主要给大家介绍了关于electron实现打印功能支持静默打印、无感打印的相关资料,需要的朋友可以参考下
    2023-12-12
  • 一篇带你搞懂Vue项目里的权限控制

    一篇带你搞懂Vue项目里的权限控制

    这篇文章主要为大家介绍了vue项目里的权限控制,文中有详细的代码示例供大家参考,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2023-06-06
  • Vue3-KeepAlive,多个页面使用keepalive方式

    Vue3-KeepAlive,多个页面使用keepalive方式

    这篇文章主要介绍了Vue3-KeepAlive,多个页面使用keepalive方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论