devbox
小惠珠哦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

在Vue3中实现虚拟列表_vue3虚拟列表

作者：小惠珠哦 | 2024-08-18 16:13:46

赞

踩

vue3虚拟列表

目录

一、前言

二、代码实现

0.准备

1.计算

2.运行

三、完整代码

四、实现效果

一、前言

        当今的时代是大数据时代，往往一个列表就有成千上万条数据，而我们一一渲染的话，则需要耗费大量时间，导致网页打开缓慢。懒加载虽然减少了第一次渲染时间，加快了网页打开速度，但随着后续数据的不断载入拼接，列表的渲染时间也会越来越长。虚拟列表则很好的解决了这一问题。

        虚拟列表只渲染当前可视区域的列表，并不会将所有的数据渲染。以下以一个自制记账本(account book)为例。

二、代码实现

0.准备

        准备尽可能多的数据，比对使用虚拟列表前后渲染速率更加直观。

  1. //总数据 不需要响应式
  2. const accountData = []
  3. ​
  4. const getData = ()=>{
  5.     //两万条数据 测试直接渲染卡顿大概1s左右
  6.     for(let i = 0; i < 10000; i++) {
  7.         accountData.push(
  8.             {
  9.                 date: `2023-03-28`,
  10.                 state: 0,
  11.                 detail:`2月份工资`,
  12.                 money: 1800
  13.             },
  14.             {
  15.                 date: `2023-03-29`,
  16.                 state: 1,
  17.                 detail:'抽烟 喝酒 烫头',
  18.                 money: 2000
  19.             })
  20.     }
  21. }

        需要准备内外两个列表容器，外部容器(account-list-outer)固定高度用于生成滚动条，内部容器(account-list-inner)用于撑开外部容器使得滚动条保持与未使用虚拟列表时一致。

  1. <template>
  2.     <!-- 固定高度用于生成滚动条 -->
  3.     <div class="account-list-outer" ref="outContainer">
  4.         <!-- 用于撑开外部容器使得滚动条保持与未使用虚拟列表时一致 -->
  5.         <div class="account-list-inner">
  6.             <!-- 循环展示 -->
  7.             <div class="account-box" v-for="(item,index) in viewData" :key="index">
  8.                 ...
  9.             </div>
  10.         </div>
  11.     </div>
  12. </template>
  13.     
  14. <script lang='ts' setup>
  15.     //外部容器dom元素
  16.     const outContainer = ref()
  17.     //内部容器padding-top
  18.     const paddingTop = ref('0px')
  19.     //内部容器padding-bottom
  20.     const paddingBottom = ref('0px')
  21.     //最终展示数据
  22.     const viewData = reactive([])
  23. </script>
  24.     
  25. <style scoped lang='scss'>
  26. .account-list-outer{
  27.   height: calc(100vh - 58px);   //根据自身需求设定高度
  28.   overflow-y: scroll;
  29.   .account-list-inner{
  30.     padding-top: v-bind('paddingTop');
  31.     padding-bottom: v-bind('paddingBottom');
  32.   }
  33. }
  34. </style>

1.计算

        在准备过程中已经获取了外部容器dom元素outContainer，定义好单行高度、外部容器高度以及滚动轴滚动长度。

  1. //单行高度
  2. const itemHeight = 70
  3. //外部容器高度
  4. const outContainerHeight = outContainer.value.cilentHeight
  5. //滚动轴滚动长度
  6. const scrollTop = outContainer.value.scrollTop

        通过这三个值可以计算出当前视口的起止下标。

  1. const startIndex = Math.floor(scrollTop / itemHeight)
  2. const endIndex = startIndex + Math.ceil(outContainerHeight / itemHeight)

        最终得出所需的外部容器padding以及当前可视的信息数据

  1. paddingTop.value = (startIndex * itemHeight).toString() + 'px'
  2. //accountData.length---总数据的长度
  3. paddingBottom.value = ((accountData.length - endIndex) * itemHeight).toString() + 'px'
  4. //清空viewData数据
  5. viewData.splice(0, viewData.length)
  6. //添加可视片段上的数据
  7. viewData.push(...accountData.slice(startIndex, endIndex + 1))

2.运行

  1. //需要获取dom元素 所以要在onMounted钩子中进行
  2. onMounted(async () => {
  3.   //获取原始数据(总数据)
  4.   getData()
  5.   //初始化创建虚拟列表
  6.   createVirtualList()
  7.   //添加事件监听
  8.   outContainer.value.addEventListener('scroll', createVirtualList)
  9. })

三、完整代码

  1. <template>
  2.     <div id="main-bg">
  3.       <div class="title">记账本</div>
  4.       <div class="account-list-outer" ref="outContainer">
  5.         <div class="account-list-inner">
  6.           <div class="account-box" v-for="(item,index) in viewData" :key="index">
  7.             <p class="date" :style="{backgroundColor:item.state?'#f2ddde':'#dff1d8', color:item.state?'#ae8286':'#8ea189'}">{{ item.date }}</p>
  8.             <div class="info">
  9.               <p class="detail">{{ item.detail }}</p>
  10.               <p class="state"><span v-if="item.state">支出</span><span v-else>收入</span></p>
  11.               <p class="money">{{item.money}}元</p>
  12.             </div>
  13.           </div>
  14.         </div>
  15.       </div>
  16.     </div>
  17. </template>
  18. ​
  19. <script lang='ts' setup>
  20. import { ref, reactive, onMounted } from 'vue'
  21.     
  22. interface AccountDataItem{
  23.   date: string //日期
  24.   state: number //收支状态 0为收入 1为支出
  25.   detail:string //详情
  26.   money: number //花费或收入
  27. }
  28. //原始数据
  29. const accountData: AccountDataItem[] = []
  30. // 最终展示数据
  31. const viewData: AccountDataItem[] = reactive([])
  32. // 外部容器dom元素
  33. const outContainer = ref()
  34. // 内部容器padding-top
  35. const paddingTop = ref('0px')
  36. // 内部容器padding-bottom
  37. const paddingBottom = ref('0px')
  38. //单行高度 可少不可多
  39. const itemHeight = 70
  40. //外部容器高度
  41. const outContainerHeight = outContainer.value.cilentHeight
  42. //滚动轴滚动长度
  43. const scrollTop = outContainer.value.scrollTop
  44. ​
  45. //获取原始数据
  46. const getData = ()=>{
  47.     //两万条数据 测试直接渲染卡顿大概1s左右
  48.     for(let i = 0; i < 10000; i++) {
  49.         accountData.push(
  50.             {
  51.                 date: `2023-03-28`,
  52.                 state: 0,
  53.                 detail:`2月份工资`,
  54.                 money: 1800
  55.             },
  56.             {
  57.                 date: `2023-03-29`,
  58.                 state: 1,
  59.                 detail:'抽烟 喝酒 烫头',
  60.                 money: 2000
  61.             })
  62.     }
  63. }
  64. ​
  65. //创建虚拟列表
  66. const createVirtualList = () => {
  67.   const startIndex = Math.floor(scrollTop / itemHeight)
  68.   const endIndex = startIndex + Math.floor(outContainerHeight / itemHeight)
  69. ​
  70.   paddingTop.value = (startIndex * itemHeight).toString() + 'px'
  71.   // accountData.length---总数据的长度
  72.   paddingBottom.value = ((accountData.length - endIndex) * itemHeight).toString() + 'px'
  73.   // 清空viewData数据
  74.   viewData.splice(0, viewData.length)
  75.   // 添加可视片段上的数据
  76.   viewData.push(...accountData.slice(startIndex, endIndex + 1))
  77. }
  78. ​
  79. // 需要获取dom元素 所以要在onMounted钩子中进行
  80. onMounted(async () => {
  81.   // 获取原始数据(总数据)
  82.   await getData()
  83.   // 初始化创建虚拟列表
  84.   createVirtualList()
  85.   // 添加事件监听
  86.   outContainer.value.addEventListener('scroll', createVirtualList)
  87. })
  88. </script>
  89. ​
  90. <style scoped lang='scss'>
  91. p{
  92.   margin: 0;
  93.   padding: 0;
  94. }
  95. #main-bg{
  96.   width: 60%;
  97.   margin: 0 auto;
  98.   padding: 20px 10px 0 10px;
  99. }
  100. .title{
  101.   width: 100%;
  102.   text-align: left;
  103.   font-size: 24px;
  104.   font-family: cursive;
  105.   font-weight: 800;
  106.   padding-bottom: 10px;
  107.   border-bottom: 1px #EEEEEE solid;
  108. }
  109. .account-list-outer{
  110.   height: calc(100vh - 58px);
  111.   overflow-y: scroll;
  112.   .account-list-inner{
  113.     padding-top: v-bind('paddingTop');
  114.     padding-bottom: v-bind('paddingBottom');
  115.     .account-box{
  116.         margin: 10px 0;
  117.         border: 1px #EEEEEE solid;
  118.         border-radius: 8px;
  119.         .date{
  120.           font-size: 14px;
  121.           line-height: 14px;
  122.           text-align: left;
  123.           padding: 10px;
  124.         }
  125.         .info{
  126.           font-size: 15px;
  127.           line-height: 15px;
  128.           text-align: left;
  129.           padding: 10px 15px;
  130.           display: flex;
  131.           .detail{
  132.             width: 60%;
  133.           }
  134.           .state{
  135.             width: 10%;
  136.           }
  137.           .monry{
  138.             width: 30%;
  139.           }
  140.     }
  141.   }
  142. }
  143. }
  144. </style>
  145. ​

四、实现效果

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/998140
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号