From 8ba78f6f6d65d03c570c70eb6ec15703bc741bd9 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Thu, 20 Feb 2025 09:33:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9A=E9=AB=98item=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E8=99=9A=E6=8B=9F=E5=88=97=E8=A1=A8=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/virtualList.vue | 56 ++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/views/demo/virtualList.vue b/src/views/demo/virtualList.vue
index 6cf48e3..96f3c35 100644
--- a/src/views/demo/virtualList.vue
+++ b/src/views/demo/virtualList.vue
@@ -1,43 +1,45 @@
 <template>
-    <!-- 容器组件高度一定要是确定的高度，不能由内容撑起 -->
-    <div
-        class="virtual-list-container"
-        ref="virtualListContainer"
-        @scroll="handleScroll($event)"
-    >
-        <!-- 绝对定位，当父组件overflow:auto时，占位组件可以撑起滚动条 -->
+    <base-container>
+        <!-- 容器组件高度一定要是确定的高度，不能由内容撑起 -->
         <div
-            class="placeholder"
-            :style="{ height: `${totalHeight}px` }"
-        ></div>
-        <!-- 偏移量设置在每个item的父容器上面 -->
-        <div :style="{ transform: getTransform }">
+            class="container"
+            ref="containerRef"
+            @scroll="handleScroll($event)"
+        >
+            <!-- 绝对定位，当父组件overflow:auto时，占位组件可以撑起滚动条 -->
             <div
-                v-for="item in renderList"
-                :key="item.id"
-                class="item"
-                :style="{ height: `${itemHeight}px` }"
-            >
-                {{ item.text }}
+                class="placeholder"
+                :style="{ height: `${listHeight}px` }"
+            ></div>
+            <!-- 偏移量设置在每个item的父容器上面 -->
+            <div :style="{ transform: getTransform }">
+                <div
+                    v-for="item in renderList"
+                    :key="item.id"
+                    class="item"
+                    :style="{ height: `${itemHeight}px` }"
+                >
+                    {{ item.text }}
+                </div>
             </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;