feat: 定高item实现虚拟列表变量优化

src/views/demo/virtualList.vue

@@ -1,14 +1,15 @@
 <template>
+    <base-container>
         <!-- 容器组件高度一定要是确定的高度，不能由内容撑起 -->
         <div
-        class="virtual-list-container"
+            class="container"
-        ref="virtualListContainer"
+            ref="containerRef"
             @scroll="handleScroll($event)"
         >
             <!-- 绝对定位，当父组件overflow:auto时，占位组件可以撑起滚动条 -->
             <div
                 class="placeholder"
-            :style="{ height: `${totalHeight}px` }"
+                :style="{ height: `${listHeight}px` }"
             ></div>
             <!-- 偏移量设置在每个item的父容器上面 -->
             <div :style="{ transform: getTransform }">
@@ -22,22 +23,23 @@
                 </div>
             </div>
         </div>
+    </base-container>
 </template>
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 
-/** 虚拟列表容器 */
-const virtualListContainer = ref(null);
-/** 虚拟列表容器高度 */
-const containerHeight = ref(0);
-
 /** 原始数据列表 */
 const dataList = Array.from({ length: 1000 }, (_, i) => ({ id: i, text: `Item ${i}` }));
 /** 虚拟列表单条item的高度 */
 const itemHeight = 100;
 /** 虚拟列表的总高度 */
-const totalHeight = dataList.length * itemHeight;
+const listHeight = computed(() => dataList.length * itemHeight);
+
+/** 虚拟列表容器 */
+const containerRef = ref(null);
+/** 虚拟列表容器高度 */
+const containerHeight = ref(0);
 const renderCount = computed(() => {
     console.log('renderCount数量为：', Math.ceil(containerHeight.value / itemHeight));
     return Math.ceil(containerHeight.value / itemHeight);
@@ -47,13 +49,13 @@ const renderCount = computed(() => {
 const start = ref(0);
 /** 虚拟列表当前可见区域的结束索引 */
 const end = computed(() => {
-    console.log('end索引为：', start.value + renderCount.value);
     return start.value + renderCount.value;
 });
 /** 虚拟列表当前可见区域的偏移量 */
 const offset = ref(0);
 const renderList = computed(() => {
     console.log('renderList数据为：', dataList.slice(start.value, end.value + 1));
+    /** 这里ender.value + 1是为了确保渲染一定超过一屏的高度 */
     return dataList.slice(start.value, end.value + 1);
 });
 
@@ -76,7 +78,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .virtual-list-container {
     width: 100%;
-    height: calc(100vh - 81px);
+    height: 100%;
     position: relative;
     overflow: auto;
     display: flex;