From 76a0215625912038487ffcbea9512389074e60c2 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Tue, 18 Feb 2025 17:57:14 +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?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/modules/demo.ts     |   4 ++
 src/views/demo/virtualList.vue | 103 +++++++++++++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 src/views/demo/virtualList.vue

diff --git a/src/router/modules/demo.ts b/src/router/modules/demo.ts
index 03273c9..96bd5ec 100644
--- a/src/router/modules/demo.ts
+++ b/src/router/modules/demo.ts
@@ -64,6 +64,10 @@ const titleArr = [
         key: 'viteProxy',
         title: 'vite中设置代理转发',
     },
+    {
+        key: 'virtualList',
+        title: 'item固定高度的虚拟列表实现',
+    },
 ];
 
 // @/views/demo/**/*.vue
diff --git a/src/views/demo/virtualList.vue b/src/views/demo/virtualList.vue
new file mode 100644
index 0000000..6cf48e3
--- /dev/null
+++ b/src/views/demo/virtualList.vue
@@ -0,0 +1,103 @@
+<template>
+    <!-- 容器组件高度一定要是确定的高度，不能由内容撑起 -->
+    <div
+        class="virtual-list-container"
+        ref="virtualListContainer"
+        @scroll="handleScroll($event)"
+    >
+        <!-- 绝对定位，当父组件overflow:auto时，占位组件可以撑起滚动条 -->
+        <div
+            class="placeholder"
+            :style="{ height: `${totalHeight}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>
+</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 renderCount = computed(() => {
+    console.log('renderCount数量为：', Math.ceil(containerHeight.value / itemHeight));
+    return Math.ceil(containerHeight.value / itemHeight);
+});
+
+/** 虚拟列表当前可见区域的起始索引 */
+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));
+    return dataList.slice(start.value, end.value + 1);
+});
+
+const handleScroll = (e) => {
+    const scrollTop = e.target.scrollTop;
+    start.value = Math.floor(scrollTop / itemHeight);
+    offset.value = scrollTop - (scrollTop % itemHeight);
+};
+
+const getTransform = computed(() => {
+    return `translate3d(0, ${offset.value}px, 0)`;
+});
+
+onMounted(() => {
+    containerHeight.value = virtualListContainer.value.clientHeight;
+    console.log('containerHeight容器高度为：', containerHeight.value);
+});
+</script>
+
+<style lang="scss" scoped>
+.virtual-list-container {
+    width: 100%;
+    height: calc(100vh - 81px);
+    position: relative;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .placeholder {
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        z-index: -1;
+    }
+
+    .item {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #444444;
+        border-bottom: 1px solid #eee;
+        box-sizing: border-box;
+    }
+}
+</style>