feat(VirtualList): 完善功能

Signed-off-by: Tenny <joel.shu@qq.com>

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>

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);

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;