From 87e6c43ff3aa2871b4ccd9862723ea03c303af4a Mon Sep 17 00:00:00 2001
From: wuwei <wuwei@fadada.com>
Date: Fri, 14 Jun 2024 16:20:17 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=9D=E6=AD=A5=E7=9A=84=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/variableHeightVitualList/index.vue  | 59 +++++++++----------
 1 file changed, 29 insertions(+), 30 deletions(-)

diff --git a/src/client/views/variableHeightVitualList/index.vue b/src/client/views/variableHeightVitualList/index.vue
index 1096469..6049d19 100644
--- a/src/client/views/variableHeightVitualList/index.vue
+++ b/src/client/views/variableHeightVitualList/index.vue
@@ -22,6 +22,13 @@
 <script setup>
 import { ref, computed, onBeforeMount } from "vue";
 
+/**
+ * Generates a random number between the given minimum and maximum values (inclusive).
+ *
+ * @param {number} min - The minimum value of the range.
+ * @param {number} max - The maximum value of the range.
+ * @return {number} - A random number between the given minimum and maximum values.
+ */
 const generateRandomNumber = (min, max) => {
   return Math.floor(Math.random() * (max - min + 1) + min);
 };
@@ -30,7 +37,7 @@ const data = ref(
   Array.from({ length: 200 }, (_, i) => {
     return {
       id: i + 1,
-      height: generateRandomNumber(30, 200),
+      height: generateRandomNumber(200, 500),
     };
   })
 );
@@ -56,27 +63,9 @@ const visibaleCount = computed(() => {
   return i;
 });
 // 结束索引
-const endIndex = ref(0);
-// 缓冲行数
-const buffer = ref(2);
-// // 缓冲起始索引
-// const bufferStartIndex = computed(() => {
-//   return Math.max(0, startIndex.value - buffer.value);
-// });
-// // 缓冲结束索引
-// const bufferEndIndex = computed(() => {
-//   return Math.min(data.value.length, endIndex.value + buffer.value);
-// });
-// // 顶部缓冲个数
-// const topBufferLength = computed(() => {
-//   return startIndex.value - Math.max(0, startIndex.value - buffer.value);
-// });
-// // 底部缓冲个数
-// const bottomBufferLength = computed(() => {
-//   return (
-//     Math.min(endIndex.value + buffer.value, data.value.length) - endIndex.value
-//   );
-// });
+const endIndex = computed(() => {
+  return startIndex.value + visibaleCount.value;
+});
 
 const virtualList = computed(() => {
   return data.value.slice(startIndex.value, endIndex.value);
@@ -87,18 +76,28 @@ onBeforeMount(() => {
   totalHeight.value =
     (data.value.length - visibaleCount.value) * estimatedHeight +
     hasVisibleHeight.value;
-  endIndex.value = startIndex.value + visibaleCount.value;
 });
 
 const startOffset = ref(0);
+const hasChanged = ref(false);
+const notVisibleHeight = ref(data.value[startIndex.value].height);
 const onScroll = (event) => {
-  const scrollTop = event.target.scrollTop;
-  startIndex.value = Math.floor(scrollTop / estimatedHeight);
-  endIndex.value = Math.min(
-    startIndex.value + visibaleCount.value,
-    data.value.length
-  );
-  startOffset.value = scrollTop - (scrollTop % estimatedHeight);
+  const { scrollTop } = event.target;
+  // 如果大于第一个索引的高度，那么需要恢复位置
+  if (scrollTop >= notVisibleHeight.value) {
+    console.log(`大于${startIndex.value}索引的高度，那么需要恢复位置`);
+    if (hasChanged.value) {
+      return;
+    }
+    startOffset.value = scrollTop;
+    hasChanged.value = true;
+    startIndex.value = startIndex.value + 1;
+    notVisibleHeight.value =
+      notVisibleHeight.value + data.value[startIndex.value].height;
+  } else {
+    console.log(`没有超出${startIndex.value}索引的高度，那么需要滚动`);
+    hasChanged.value = false;
+  }
 };
 </script>