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

vue3 实现虚拟列表_vue3 虚拟列表

作者：空白诗007 | 2024-08-18 16:10:45

赞

踩

vue3 虚拟列表

虚拟列表：按需显示的一种实现，即只对可视区域进行渲染，对非可见区域中的数据不渲染或者部分渲染。

虚拟列表原理：

       仅加载可视区域内的列表项，当发生滚动时计算应展示列表项的startIndex,endIndex，并计算对应的数据在整个列表中的偏移量（为了让列表项展示在可视区域内）

获取元素的scrollTop,然后依此计算在可视区域内展示的列表数据项的前后索引。

  1. <template>
  2.     <div class="main" @scroll="throttles" ref="list">
  3.         <div :style="{ height: totalHeight + 'px' }"></div>
  4.         <div class="list" :style="{ transform }" ref="itemList">
  5.             <el-card v-for="item in visibleData" :key="item.index" class="card">
  6.                 XXX
  7.             </el-card>
  8.         </div>
  9.     </div>
  10. </template>

定高

  1.  
  2.     const scrollTop: number = list.value.scrollTop 
  3.     //起始索引  向下取整  将仅一部分可见的列表项也渲染出来
  4.     start = Math.floor(scrollTop / itemSize)
  5.     //结束索引
  6.     end = start + visibleCount > data.length ? data.length : start + visibleCount  //防止end越界
  7.  
  8.     const data: any = {
  9.     list: [],  //请求的数据
  10.     length: 0  //总数据长度
  11. }
  12.     
  13.     //可视区域展示条数 向上取整，将仅一部分可见的列表项也包含进去
  14.     const visibleCount: number = Math.ceil(visibleHeight / itemSize) 
  15.  
  16.     //每一项的高度
  17.     const itemSize: number = 220  
  18.      
  19.     //可视区域高度
  20.     const visibleHeight: number = 700  

  1. <template>
  2.     <div class="main" @scroll="throttles" ref="list">
  3.         <!-- 防止滚动条样式变化，当滚动条没有被隐藏时 -->
  4.         <div :style="{ height: totalHeight + 'px' }"></div>
  5.         <div class="list" :style="{ transform }" ref="itemList">
  6.             <el-card v-for="item in visibleData" :key="item.index" class="card">
  7.                 <el-descriptions :title="'User Info' + item.index">
  8.                     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
  9.                     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
  10.                     <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
  11.                     <el-descriptions-item label="Remarks">
  12.                         <el-tag size="small">School</el-tag>
  13.                     </el-descriptions-item>
  14.                     <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
  15.                         Province</el-descriptions-item>
  16.                 </el-descriptions>
  17.             </el-card>
  18.         </div>
  19.     </div>
  20. </template>
  21. <script lang="ts" setup>
  22. import { ref, onMounted } from 'vue';
  23. const list = ref()
  24. const itemList = ref()
  25. const itemSize: number = 220  //每一项的高度
  26. const visibleHeight: number = 700  //可视区域高度
  27. const visibleCount: number = Math.ceil(visibleHeight / itemSize) //可视区域展示条数
  28. let startOffset: number = 0 //偏移量
  29. let start: number = 0   //开始索引
  30. let end: number = visibleCount - 1 //结束索引
  31. let data: any = {
  32.     list: [],//请求的数据
  33.     length: 0
  34. }
  35. let totalHeight: number = 0   //总高度
  36. let transform: string = `translate3d(0,${start * itemSize}px,0)` //偏移量
  37. const visibleData: any = ref()   //列表展示数据
  38.  
  39.  
  40.  
  41. //模拟请求
  42. const getData = (start: number, end: number) => {
  43.     start = start - 10 < 0 ? 0 : start - 10;
  44.     if (data.length == 0)
  45.         end = end + 10;
  46.     else
  47.         end = end + 10 > data.length ? data.length : end + 10;
  48.     return new Promise((resolve) => {
  49.         setTimeout(() => {
  50.             let list = []
  51.             for (let i = start; i <= end; i++) {
  52.                 list.push({
  53.                     index: i,
  54.                 })
  55.             }
  56.             resolve({
  57.                 list,
  58.                 length: 100
  59.             })
  60.         }, 30)
  61.     })
  62. }
  63.  
  64.  
  65. onMounted(async () => {
  66.     data = await getData(start, end)  //请求的接口
  67.     totalHeight = data.length * itemSize  //设置真实列表总高度
  68.     visibleData.value = data.list    //为展示的列表项赋值
  69. })
  70.  
  71.  
  72.  
  73.  
  74. const scrollEvent = async () => {
  75.     const scrollTop: number = list.value.scrollTop
  76.     start = Math.floor(scrollTop / itemSize)
  77.     end = start + visibleCount > data.length ? data.length : start + visibleCount 
  78.     data = await getData(start, end)
  79.     visibleData.value = data.list
  80.     startOffset = start * itemSize
  81.     transform = `translate3d(0,${startOffset}px,0)`
  82. }
  83.  
  84. const throttles = throttle(scrollEvent)
  85.  
  86. //设置节流
  87. const throttle=(fn: Function, delay: number = 30)=> {
  88.     let oldTime = Date.now()
  89.     return function () {
  90.         const _this: any = this
  91.         let newTime = Date.now()
  92.         if (newTime - oldTime > delay) {
  93.             fn.apply(_this, ...arguments)
  94.             oldTime = newTime
  95.         }
  96.     }
  97. }
  98. </script>
  99. <style lang="scss" scoped>
  100. .main {
  101.     overflow-y: scroll;
  102.     height: 75vh;
  103.  
  104.     //隐藏滚动条
  105.     /* Firefox */
  106.     scrollbar-width: none;
  107.     /* IE 10+ */
  108.     -ms-overflow-style: none;
  109.  
  110.     ::-webkit-scrollbar {
  111.         /* Chrome Safari */
  112.         display: none;
  113.     }
  114.  
  115.     .list {
  116.         width: 100%;
  117.  
  118.         .card {
  119.             margin-bottom: 20px;
  120.  
  121.         }
  122.     }
  123. }
  124. </style>

不定高

不定高初始展示时和定高思路一致，均需要初始化设置一个列表项初始高度，以及真实列表的总高度。

然后在将数据渲染到列表上后获取列表项的真实高度，然后重新设置列表项的高度，偏移量以及真实列表总高度。

  1. <template>
  2.     <div class="main" @scroll="throttles" ref="list">
  3.         <div :style="{ height: totalHeight + 'px' }"></div>
  4.         <div class="list" :style="{ transform }" ref="itemList">
  5.             <el-card v-for="item in visibleData" :key="item.index" class="card">
  6.                 <el-descriptions :title="'User Info' + item.index">
  7.                     <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
  8.                     <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
  9.                     <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
  10.                     <el-descriptions-item label="Remarks">
  11.                         <el-tag size="small">School</el-tag>
  12.                     </el-descriptions-item>
  13.                     <el-descriptions-item label="Address">No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
  14.                         Province</el-descriptions-item>
  15.                 </el-descriptions>
  16.                 //用来模拟不定高的情况
  17.                 <div style="height: 50px;background: skyblue" v-if="item.hidden">
  18.                     <span>123</span>
  19.                 </div>
  20.             </el-card>
  21.         </div>
  22.     </div>
  23. </template>
  24. <script lang="ts" setup>
  25. import { ref, reactive, onMounted, computed, nextTick } from 'vue';
  26. const list = ref()
  27. const itemList = ref()
  28. const itemSize: number = 220  //每一项的高度
  29. const visibleHeight: number = 700  //可视区域高度
  30. const visibleCount: number = Math.ceil(visibleHeight / itemSize) //可视区域展示条数
  31. let startOffset: number = 0 //偏移量
  32. let start: number = 0   //开始索引
  33. let end: number = visibleCount - 1 //结束索引
  34.  
  35.  
  36. //模拟请求
  37. const getData = (start: number, end: number) => {
  38.     start = start - 10 < 0 ? 0 : start - 10;
  39.     if (data.length == 0)
  40.         end = end + 10;
  41.     else
  42.         end = end + 10 > data.length ? data.length : end + 10;
  43.     return new Promise((resolve) => {
  44.         setTimeout(() => {
  45.             let list = []
  46.             for (let i = start; i <= end; i++) {
  47.                 list.push({
  48.                     index: i,
  49.                     hidden: i % 2 == 0 ? true : false  //控制是否显示与隐藏多的一部分
  50.                 })
  51.             }
  52.             resolve({
  53.                 list,
  54.                 length: 100
  55.             })
  56.         }, 30)
  57.     })
  58. }
  59.  
  60. //对数据进行缓存
  61. const getFinalData = (list: any) => {
  62.     return list.map((item: any) => {
  63.         return {
  64.             index: item.index,
  65.             hidden: item.hidden,
  66.             height: 220,
  67.             top: 220 * item.index,
  68.         }
  69.  
  70.     })
  71. }
  72.  
  73. //存储加工好了的数据
  74. const finalData: any = reactive([])
  75.  
  76. //finalData数组的endIndex
  77. const footer = computed(() => finalData.length - 1)
  78.  
  79. //更改缓存
  80. const adjustDataList = (list: any) => {
  81.     //获取列表项
  82.     const documentList: any = itemList.value.children
  83.     for (let index = 0; index < list.length; index++) {
  84.         //获取列表项的真实高度  +20是因为设置了margin-bottom为20
  85.         list[index].height = documentList[index].offsetHeight + 20
  86.     }
  87.     //列表展示的数据全都没有更新
  88.     if (footer.value < start) {
  89.         finalData.push(...list)
  90.         for (let index = start; index <= end; index++) {
  91.             //第一个数据的偏移量为0
  92.             if (finalData[index].index == 0)
  93.                 finalData[index].top = 0
  94.             else
  95.             //后续数据的偏移量为前一个数据的偏移量加上前一个数据的真实高度
  96.                 finalData[index].top = finalData[index - 1].top + finalData[index - 1].height
  97.  
  98.         }
  99.     }
  100.     //列表展示的数据仅一部分更新过，将没更新过的数据过滤出来进行更新后再加入缓存（finalData）
  101.     if (footer.value >= start && footer.value < end) {
  102.         const data = list.filter((item: any) => item.index > footer.value)
  103.         finalData.push(...data)
  104.         for (let index = data[0].index; index <= data[data.length - 1].index; index++) {
  105.             finalData[index].top = finalData[index - 1].top + finalData[index - 1].height
  106.         }
  107.     }
  108.     
  109.     //列表项高度发生变化后，真实列表总高度也需要重新计算
  110.     totalHeight = finalData[finalData.length - 1].top + finalData[finalData.length - 1].height + (data.length - finalData.length) * itemSize
  111. }
  112.  
  113.  
  114. let data: any = {
  115.     list: [],//请求的数据
  116.     length: 0
  117. }
  118.  
  119. onMounted(async () => {
  120.     data = await getData(start, end)
  121.     data.list = getFinalData(data.list.filter((item: any) => item.index >= start && item.index <= end))
  122.     totalHeight = data.length * itemSize
  123.     visibleData.value = data.list
  124.     //vue是异步渲染，需要nextTick在将初始化的列表项渲染完成后再拿到列表项的真实数据然后进行重新渲染
  125.     nextTick(() => {
  126.         adjustDataList(data.list)
  127.         visibleData.value = finalData.slice(start, end + 1)
  128.     })
  129. })
  130.  
  131. let totalHeight: number = 0   //总高度
  132. let transform: string = `translate3d(0,${start * itemSize}px,0)`
  133. const visibleData: any = ref()
  134.  
  135. const getIndex = (scrollTop: number) => {
  136.     //定高
  137.     // start = Math.floor(scrollTop / itemSize)
  138.     // end = start + visibleCount > data.length ? data.length : start + visibleCount  //防止end越界
  139.     //不定高 不定高后可视区域展示的数据条数会浮动
  140.     start = finalData.findIndex((item: any) => item.top >= scrollTop) - 1
  141.     end = finalData.findLastIndex((item: any) => item.top <= scrollTop + visibleHeight) + 1
  142. }
  143.  
  144. const scrollEvent = async () => {
  145.     const scrollTop: number = list.value.scrollTop
  146.     getIndex(scrollTop)
  147.     data = await getData(start, end)
  148.     //前后各多渲染10条数据进行缓冲，防止滑动过快出现空白情况
  149.     data.list = getFinalData(data.list.filter((item: any) => item.index >= (start - 10) && item.index <= (end + 10)))
  150.  
  151.     //设置新的偏移量
  152.     startOffset = finalData[start].top
  153.     transform = `translate3d(0,${startOffset}px,0)`
  154.     //如果向上滚动则不需要重新渲染，数据已经加工过并缓存了起来
  155.     if (end > footer.value)
  156.         visibleData.value = data.list
  157.     nextTick(() => {
  158.         //有一部分数据没进行过加工才执行
  159.         if (end > footer.value)
  160.             adjustDataList(data.list)
  161.         visibleData.value = finalData.slice(start - 10 < 0 ? 0 : start - 10, end + 10 > footer.value ? footer.value : end + 10)
  162.  
  163.     })
  164. }
  165.  
  166. const throttles = throttle(scrollEvent)
  167.  
  168.  
  169. </script>
  170.

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

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

  

闽ICP备14008679号