feat(Virtual): 虚拟列表模板

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

Author: Tenny

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',

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,

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 |

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>

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

src/style.css

@@ -237,3 +237,7 @@
 select {
   appearance: auto;
 }
+
+.virtual-list-demo-container {
+  height: 240px;
+}

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;
+}

style/virtual-list/index.js

@@ -0,0 +1 @@
+import "./index.css";