From 31c3f8a0d32766d76223e4e5efc4b4e2b6e5fd4b Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Thu, 22 Aug 2024 16:47:46 +0800
Subject: [PATCH 1/5] =?UTF-8?q?chore:=20=E8=87=AA=E5=8A=A8=E8=84=9A?=
 =?UTF-8?q?=E6=9C=AC=E5=91=BD=E4=BB=A4=E5=8F=98=E6=9B=B4=20publish=20->=20?=
 =?UTF-8?q?pull=20=E9=81=BF=E5=85=8D=E4=B8=8E=20pnpm=20=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tenny <tenny.shu@foxmail.com>
---
 package.json        | 2 +-
 scripts/publish.ps1 | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d8d26b53..38a4cc2f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "docs:preview": "vitepress preview docs",
     "inspect:eslint": "eslint --inspect-config",
     "push": "pwsh scripts/publish.ps1 push",
-    "publish": "./scripts/publish.ps1 publish"
+    "pull": "pwsh scripts/publish.ps1 publish"
   },
   "devDependencies": {
     "@types/node": "^22.5.0",
diff --git a/scripts/publish.ps1 b/scripts/publish.ps1
index c94a83f6..be14005e 100644
--- a/scripts/publish.ps1
+++ b/scripts/publish.ps1
@@ -21,7 +21,8 @@ if ($Cmd -eq "push") {
   git merge dev -m "new version"
   git push origin main
 
-  Write-Host $Message
+  Write-Host " "
+  Write-Host "提交成功" -ForegroundColor Green
 } elseif (($Cmd -eq "pull") -or ($Cmd -eq "publish")) {
   git pull origin main
   pnpm lib:build

From 6f82190fb645bad3e8858ccb57719d07915ad356 Mon Sep 17 00:00:00 2001
From: Tenny <joel.shu@qq.com>
Date: Mon, 2 Sep 2024 23:57:51 +0800
Subject: [PATCH 2/5] =?UTF-8?q?feat(Virtual):=20=E8=99=9A=E6=8B=9F?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tenny <joel.shu@qq.com>
---
 docs/.vitepress/config.ts      |  4 ++++
 docs/.vitepress/theme/index.ts |  1 +
 docs/components/virtuallist.md | 40 ++++++++++++++++++++++++++++++++++
 src/components/VirtualList.vue | 12 ++++++++++
 src/index.ts                   |  1 +
 src/style.css                  |  4 ++++
 style/virtual-list/index.css   |  9 ++++++++
 style/virtual-list/index.js    |  1 +
 8 files changed, 72 insertions(+)
 create mode 100644 docs/components/virtuallist.md
 create mode 100644 src/components/VirtualList.vue
 create mode 100644 style/virtual-list/index.css
 create mode 100644 style/virtual-list/index.js

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 3968643b..e6dd419b 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -164,6 +164,10 @@ export default defineConfig({
             text: 'List 滚动列表',
             link: '/components/list',
           },
+          {
+            text: 'VirtualList 虚拟列表',
+            link: '/components/virtuallist',
+          },
           {
             text: 'Tabs 标签页',
             link: '/components/tabs',
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index 8874aab1..56d9dd86 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -40,6 +40,7 @@ import '../../../style/tag';
 import '../../../style/pagination';
 import '../../../style/tanstack-table';
 import '../../../style/md-input';
+import '../../../style/virtual-list';
 
 export default {
   extends: DefaultTheme,
diff --git a/docs/components/virtuallist.md b/docs/components/virtuallist.md
new file mode 100644
index 00000000..46609ed6
--- /dev/null
+++ b/docs/components/virtuallist.md
@@ -0,0 +1,40 @@
+# VirtualList 虚拟列表
+
+当我们遇到数据量很大的情况时，传统的渲染方式会导致浏览器负载过大，页面渲染速度慢，滚动卡顿等一系列问题。
+
+对于这种列表数据，我们可以采用虚拟滚动来进行性能优化。
+
+## 演示
+
+<script setup>
+  import { VirtualList } from "../../src"
+</script>
+
+### 基础用法
+
+对于固定高度, 一次性渲染 `10w` 条数据。
+
+<ClientOnly>
+  <CodePreview>
+  <textarea lang="vue">
+  <script setup>
+  </script>
+  <template>
+  </template>
+  </textarea>
+  <template #preview>
+    <div class="virtual-list-demo-container">
+      <VirtualList></VirtualList>
+    </div>
+  </template>
+  </CodePreview>
+</ClientOnly>
+
+## API
+
+### VirtualList Props
+
+<!-- prettier-ignore -->
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| x | x | x | x |
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
new file mode 100644
index 00000000..719c06a7
--- /dev/null
+++ b/src/components/VirtualList.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="nt-virtual-list">
+    <!-- 占位元素, 用于撑开滚动条，达到滚动效果 -->
+    <div class="nt-virtual-placeholder"></div>
+    <!-- 内容元素, 用于显示列表项 -->
+    <div class="nt-virtual-content">
+      <!-- 列表项 -->
+      <div class="nt-virtual-item"></div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts"></script>
diff --git a/src/index.ts b/src/index.ts
index b0f8f02c..c1008068 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -71,3 +71,4 @@ export { default as Loading } from './directives/loading';
 export { default as PageHeader } from './components/PageHeader.vue';
 export { default as Tag } from './components/Tag.vue';
 export { default as Pagination } from './components/Pagination.vue';
+export { default as VirtualList } from "./components/VirtualList.vue";
diff --git a/src/style.css b/src/style.css
index bc5751fe..92c25234 100644
--- a/src/style.css
+++ b/src/style.css
@@ -237,3 +237,7 @@
 select {
   appearance: auto;
 }
+
+.virtual-list-demo-container {
+  height: 240px;
+}
diff --git a/style/virtual-list/index.css b/style/virtual-list/index.css
new file mode 100644
index 00000000..94f03abc
--- /dev/null
+++ b/style/virtual-list/index.css
@@ -0,0 +1,9 @@
+.nt-virtual-list {
+  height: 100%;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.nt-virtual-item {
+  overflow: hidden;
+}
diff --git a/style/virtual-list/index.js b/style/virtual-list/index.js
new file mode 100644
index 00000000..4582418a
--- /dev/null
+++ b/style/virtual-list/index.js
@@ -0,0 +1 @@
+import "./index.css";
\ No newline at end of file

From fa0f3a803896118e6e878608a62877e17e50af15 Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Mon, 9 Sep 2024 17:56:53 +0800
Subject: [PATCH 3/5] =?UTF-8?q?feat(VirtualList):=20=E5=88=9D=E5=A7=8B?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/virtuallist.md |  2 +
 src/components/VirtualList.vue | 75 +++++++++++++++++++++++++++++++---
 style/virtual-list/index.css   |  9 +++-
 3 files changed, 79 insertions(+), 7 deletions(-)

diff --git a/docs/components/virtuallist.md b/docs/components/virtuallist.md
index 46609ed6..6136c86a 100644
--- a/docs/components/virtuallist.md
+++ b/docs/components/virtuallist.md
@@ -8,6 +8,8 @@
 
 <script setup>
   import { VirtualList } from "../../src"
+
+  
 </script>
 
 ### 基础用法
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
index 719c06a7..031f10b5 100644
--- a/src/components/VirtualList.vue
+++ b/src/components/VirtualList.vue
@@ -1,12 +1,77 @@
 <template>
-  <div class="nt-virtual-list">
+  <div class="nt-virtual-list" ref="$list">
     <!-- 占位元素, 用于撑开滚动条，达到滚动效果 -->
-    <div class="nt-virtual-placeholder"></div>
+    <div class="nt-virtual-placeholder" ref="$placeholder"></div>
     <!-- 内容元素, 用于显示列表项 -->
-    <div class="nt-virtual-content">
+    <div class="nt-virtual-content" ref="$itemContent">
       <!-- 列表项 -->
-      <div class="nt-virtual-item"></div>
+      <div
+        v-for="(item, index) in visibleData"
+        :style="{ height: props.itemSize + 'px' }"
+        :key="keyField != null ? (item as any)[keyField] : index"
+        :class="['nt-virtual-item', itemClass]"
+      >
+        <slot :item="item"></slot>
+      </div>
     </div>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts" generic="T">
+import { onMounted, ref } from 'vue';
+import { debounce } from 'ph-utils/web';
+
+const props = withDefaults(
+  defineProps<{
+    /** 需要展示的数据 */
+    items: T[];
+    /** 列表项的高度，用于计算滚动大小和位置 */
+    itemSize: number;
+    itemClass?: string;
+    /** 选项 key 的字段名, 用于 v-for 的 key */
+    keyField?: string;
+  }>(),
+  {
+    itemClass: '',
+  },
+);
+
+/** 可视区域内能显示的数据总数 */
+let visibleCount = 0;
+/** 是否正在处理数据 */
+let loading = false;
+const $list = ref<HTMLDivElement>();
+const $itemContent = ref<HTMLDivElement>();
+const $placeholder = ref<HTMLDivElement>();
+/** 实际显示的数据列表 */
+const visibleData = ref<T[]>([]);
+
+function renderData() {
+  if ($list.value != null) {
+    // 计算可视区域数据的开始索引
+    const startIndex = Math.floor($list.value.scrollTop / props.itemSize);
+    if ($itemContent.value != null) {
+      // 开始项距离容器顶部的距离, 保证在滚动时数据一直在可视区域内
+      const top = `${startIndex * props.itemSize}px`;
+      $itemContent.value.style.top = top;
+    }
+    // 生成可视区域数据
+    visibleData.value = props.items.slice(
+      startIndex,
+      startIndex + visibleCount,
+    ) as any[];
+  }
+}
+
+onMounted(() => {
+  if ($list.value != null) {
+    visibleCount = Math.ceil($list.value.clientHeight / props.itemSize);
+
+    if ($placeholder.value != null) {
+      const height = props.itemSize * props.items.length;
+      $placeholder.value.style.height = `${height}px`;
+    }
+
+    renderData(); // 初始化渲染数据
+  }
+});
+</script>
diff --git a/style/virtual-list/index.css b/style/virtual-list/index.css
index 94f03abc..b4b2929c 100644
--- a/style/virtual-list/index.css
+++ b/style/virtual-list/index.css
@@ -1,9 +1,14 @@
 .nt-virtual-list {
-  height: 100%;
+  max-height: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
+  position: relative;
+}
+.nt-virtual-content {
+  position: absolute;
+  top: 0;
+  width: 100%;
 }
-
 .nt-virtual-item {
   overflow: hidden;
 }

From fc0da47069fad48b41a58de02cbaea729aeb724e Mon Sep 17 00:00:00 2001
From: Tenny <joel.shu@qq.com>
Date: Mon, 9 Sep 2024 23:02:46 +0800
Subject: [PATCH 4/5] =?UTF-8?q?feat(VirtualList):=20=E5=AE=8C=E5=96=84?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tenny <joel.shu@qq.com>
---
 docs/components/virtuallist.md | 22 ++++++++++++++++++++--
 src/components/VirtualList.vue | 11 ++++++++++-
 style/virtual-list/index.css   |  2 +-
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/docs/components/virtuallist.md b/docs/components/virtuallist.md
index 6136c86a..4f76fe4e 100644
--- a/docs/components/virtuallist.md
+++ b/docs/components/virtuallist.md
@@ -9,7 +9,19 @@
 <script setup>
   import { VirtualList } from "../../src"
 
-  
+  const avatars = [
+    'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+    'https://avatars.githubusercontent.com/u/20943608?s=60&v=4',
+    'https://avatars.githubusercontent.com/u/46394163?s=60&v=4',
+    'https://avatars.githubusercontent.com/u/39197136?s=60&v=4',
+    'https://avatars.githubusercontent.com/u/19239641?s=60&v=4'
+  ]
+
+  const items = Array.from({ length: 10000 }, (_, i) => ({
+    key: `${i}`,
+    value: i,
+    avatar: avatars[i % avatars.length]
+  }))
 </script>
 
 ### 基础用法
@@ -26,8 +38,14 @@
   </textarea>
   <template #preview>
     <div class="virtual-list-demo-container">
-      <VirtualList></VirtualList>
+      <VirtualList :items="items" :item-size="42">
+        <template  #default="{ item }">
+          <img class="avatar" :src="item.avatar" alt="" style="display:inline-block;width:30px;border-radius:50%" />
+          <span>{{ item.value }}</span>
+        </template>
+      </VirtualList>
     </div>
+
   </template>
   </CodePreview>
 </ClientOnly>
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
index 031f10b5..ee86a071 100644
--- a/src/components/VirtualList.vue
+++ b/src/components/VirtualList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nt-virtual-list" ref="$list">
+  <div class="nt-virtual-list" ref="$list" @scroll="handleListScroll">
     <!-- 占位元素, 用于撑开滚动条，达到滚动效果 -->
     <div class="nt-virtual-placeholder" ref="$placeholder"></div>
     <!-- 内容元素, 用于显示列表项 -->
@@ -62,6 +62,15 @@ function renderData() {
   }
 }
 
+function handleListScroll() {
+  debounce(() => {
+    if (loading) return;
+    loading = true;
+    renderData(); // 重新渲染数据
+    loading = false;
+  }, 150)();
+}
+
 onMounted(() => {
   if ($list.value != null) {
     visibleCount = Math.ceil($list.value.clientHeight / props.itemSize);
diff --git a/style/virtual-list/index.css b/style/virtual-list/index.css
index b4b2929c..9d161265 100644
--- a/style/virtual-list/index.css
+++ b/style/virtual-list/index.css
@@ -1,5 +1,5 @@
 .nt-virtual-list {
-  max-height: 100%;
+  height: 100%;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   position: relative;

From df5e027c05aade43aa63759bbaac39ad4c89b70f Mon Sep 17 00:00:00 2001
From: Tenny <tenny.shu@foxmail.com>
Date: Wed, 11 Sep 2024 12:06:21 +0800
Subject: [PATCH 5/5] =?UTF-8?q?feat(VirtualList):=20=E8=99=9A=E6=8B=9F?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/components/virtuallist.md    |  47 +++++++++-----
 src/app_components/SourceCode.vue |   1 -
 src/components/VirtualList.vue    | 101 ++++++++++++++++--------------
 3 files changed, 84 insertions(+), 65 deletions(-)

diff --git a/docs/components/virtuallist.md b/docs/components/virtuallist.md
index 4f76fe4e..59ccfbdb 100644
--- a/docs/components/virtuallist.md
+++ b/docs/components/virtuallist.md
@@ -4,48 +4,49 @@
 
 对于这种列表数据，我们可以采用虚拟滚动来进行性能优化。
 
+> 1. **现在暂时只支持固定高度的列表**
+> 2. 以后可以考虑使用 `css3` 属性 [content-visibility](https://developer.mozilla.org/zh-CN/docs/Web/CSS/content-visibility)
+
 ## 演示
 
 <script setup>
   import { VirtualList } from "../../src"
 
-  const avatars = [
-    'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
-    'https://avatars.githubusercontent.com/u/20943608?s=60&v=4',
-    'https://avatars.githubusercontent.com/u/46394163?s=60&v=4',
-    'https://avatars.githubusercontent.com/u/39197136?s=60&v=4',
-    'https://avatars.githubusercontent.com/u/19239641?s=60&v=4'
-  ]
-
   const items = Array.from({ length: 10000 }, (_, i) => ({
-    key: `${i}`,
+    id: `${i}`,
     value: i,
-    avatar: avatars[i % avatars.length]
   }))
 </script>
 
 ### 基础用法
 
-对于固定高度, 一次性渲染 `10w` 条数据。
+对于固定高度, 一次性渲染 `1w` 条数据。`item-size` 表示每一行的高度
 
 <ClientOnly>
   <CodePreview>
-  <textarea lang="vue">
-  <script setup>
+  <textarea lang="vue" v-pre>
+  <script setup lang="ts">
+    const items = Array.from({ length: 10000 }, (_, i) => ({
+      id: `${i}`,
+      value: i,
+    }));
   </script>
   <template>
+    <nt-virtual-list :items="items" :item-size="42" key-field="id">
+      <template  #default="{ item }">
+        <span>{{ item.value }}</span>
+      </template>
+    </nt-virtual-list>
   </template>
   </textarea>
   <template #preview>
     <div class="virtual-list-demo-container">
-      <VirtualList :items="items" :item-size="42">
+      <VirtualList :items="items" :item-size="42" key-field="id">
         <template  #default="{ item }">
-          <img class="avatar" :src="item.avatar" alt="" style="display:inline-block;width:30px;border-radius:50%" />
           <span>{{ item.value }}</span>
         </template>
       </VirtualList>
     </div>
-
   </template>
   </CodePreview>
 </ClientOnly>
@@ -57,4 +58,16 @@
 <!-- prettier-ignore -->
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| x | x | x | x |
+| `items` | *必传*, 需要展示的数据 | `any[]` | - |
+| `item-size` | *必传*, 表项的高度，用于计算滚动大小和位置 | `number` | - |
+| `item-class` | 列表项的 `class` | `string` | - |
+| `key-field` | 选项 `key` 的字段名, 用于 `v-for` 的 `key`, 不传则用 `index` | `string` | - |
+| `buffer` | 冲区数量，列表会在上下多渲染额外的项 | `number` | `2` |
+
+### VirtualList Slots
+
+<!-- prettier-ignore -->
+| 名称 | 说明 | 字段 |
+| --- | --- | --- |
+| `default` | 渲染列表项内容 | `item`: 列表项数据 |
+| `render` | 渲染整个列表项, 需要手动遍历数据列表进行渲染 | `items`: 可现实列表数据 |
diff --git a/src/app_components/SourceCode.vue b/src/app_components/SourceCode.vue
index 8ea8126f..dfb2495e 100644
--- a/src/app_components/SourceCode.vue
+++ b/src/app_components/SourceCode.vue
@@ -79,7 +79,6 @@ onMounted(async () => {
         const parser = new DOMParser();
         const doc = parser.parseFromString(preCode, 'text/html');
         const children = doc.body.children;
-
         for (let i = 0, len = children.length; i < len; i++) {
           if (children[i] != null) {
             fragment.appendChild(children[i]);
diff --git a/src/components/VirtualList.vue b/src/components/VirtualList.vue
index ee86a071..1e33ff0e 100644
--- a/src/components/VirtualList.vue
+++ b/src/components/VirtualList.vue
@@ -1,24 +1,24 @@
 <template>
-  <div class="nt-virtual-list" ref="$list" @scroll="handleListScroll">
-    <!-- 占位元素, 用于撑开滚动条，达到滚动效果 -->
-    <div class="nt-virtual-placeholder" ref="$placeholder"></div>
-    <!-- 内容元素, 用于显示列表项 -->
-    <div class="nt-virtual-content" ref="$itemContent">
-      <!-- 列表项 -->
-      <div
-        v-for="(item, index) in visibleData"
-        :style="{ height: props.itemSize + 'px' }"
-        :key="keyField != null ? (item as any)[keyField] : index"
-        :class="['nt-virtual-item', itemClass]"
-      >
-        <slot :item="item"></slot>
+  <div class="nt-virtual-list" ref="$list" @scroll.passive="handleScroll">
+    <div :style="{ height: `${totalSize}px` }">
+      <div :style="{ transform: `translate3d(0px, ${startOffset}px, 0px)` }">
+        <slot name="render" :data="visibleData">
+          <!-- 列表项 -->
+          <div
+            v-for="(item, index) in visibleData"
+            :style="{ height: props.itemSize + 'px' }"
+            :key="keyField != null ? (item as any)[keyField] : index"
+            :class="['nt-virtual-item', itemClass]"
+          >
+            <slot :item="item"></slot>
+          </div>
+        </slot>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts" generic="T">
 import { onMounted, ref } from 'vue';
-import { debounce } from 'ph-utils/web';
 
 const props = withDefaults(
   defineProps<{
@@ -29,58 +29,65 @@ const props = withDefaults(
     itemClass?: string;
     /** 选项 key 的字段名, 用于 v-for 的 key */
     keyField?: string;
+    /** 缓冲区数量，列表会在上下多渲染额外的项 */
+    buffer?: number;
   }>(),
   {
     itemClass: '',
+    buffer: 2,
   },
 );
 
-/** 可视区域内能显示的数据总数 */
-let visibleCount = 0;
-/** 是否正在处理数据 */
-let loading = false;
 const $list = ref<HTMLDivElement>();
-const $itemContent = ref<HTMLDivElement>();
-const $placeholder = ref<HTMLDivElement>();
+
 /** 实际显示的数据列表 */
 const visibleData = ref<T[]>([]);
+/** 容器总高度 */
+const totalSize = ref(0);
+/** 滑动便宜 */
+const startOffset = ref(0);
+
+/** 可视区域能够展示的最大元素个数 */
+let numVisible = 0;
+
+/** 滑动延迟处理，滑动完成后，延迟处理更新数据，避免频繁触发数据更新 */
+let _t = -1;
 
-function renderData() {
+function updateVisibleItems() {
   if ($list.value != null) {
-    // 计算可视区域数据的开始索引
-    const startIndex = Math.floor($list.value.scrollTop / props.itemSize);
-    if ($itemContent.value != null) {
-      // 开始项距离容器顶部的距离, 保证在滚动时数据一直在可视区域内
-      const top = `${startIndex * props.itemSize}px`;
-      $itemContent.value.style.top = top;
-    }
+    // 当前滚动位置
+    const scrollTop = $list.value.scrollTop;
+    /** 可视区域开始索引 */
+    let startIndex = Math.floor(scrollTop / props.itemSize);
+    /** 上缓冲区起始索引 */
+    let topStartIndex = Math.max(0, startIndex - props.buffer);
+    /** 下缓冲区结束索引 */
+    const endIndex = Math.min(
+      props.items.length,
+      startIndex + numVisible + props.buffer,
+    );
+    // 偏移量, 当滑动位置是某一项的一部分的时候,计算已经滚动的那一部分距离
+    let offset = scrollTop - (scrollTop % props.itemSize);
     // 生成可视区域数据
-    visibleData.value = props.items.slice(
-      startIndex,
-      startIndex + visibleCount,
-    ) as any[];
+    visibleData.value = props.items.slice(topStartIndex, endIndex) as any[];
+    /** 当前显示index-缓冲区的index就是缓冲区数量 */
+    startOffset.value = offset - (startIndex - topStartIndex) * props.itemSize;
   }
 }
 
-function handleListScroll() {
-  debounce(() => {
-    if (loading) return;
-    loading = true;
-    renderData(); // 重新渲染数据
-    loading = false;
-  }, 150)();
+function handleScroll() {
+  cancelAnimationFrame(_t);
+  _t = requestAnimationFrame(() => {
+    updateVisibleItems(); // 重新渲染数据
+  });
 }
 
 onMounted(() => {
+  totalSize.value = props.itemSize * props.items.length;
   if ($list.value != null) {
-    visibleCount = Math.ceil($list.value.clientHeight / props.itemSize);
-
-    if ($placeholder.value != null) {
-      const height = props.itemSize * props.items.length;
-      $placeholder.value.style.height = `${height}px`;
-    }
-
-    renderData(); // 初始化渲染数据
+    let rect = $list.value.getBoundingClientRect();
+    numVisible = Math.ceil(rect.height / props.itemSize);
+    updateVisibleItems(); // 初始化渲染数据
   }
 });
 </script>