# VirtualScroll 虛擬滾動組件（用于大量數據純展示時使用） ## Usage ```vue <template> <div class="p-4 virtual-scroll-demo"> <Divider>基礎滾動示例</Divider> <div class="virtual-scroll-demo-wrap"> <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300"> <template v-slot="{ item }"> <div class="virtual-scroll-demo__item">{{ item.title }}</div> </template> </VirtualScroll> </div> <Divider>即使不可見，也預先加載50條數據，防止空白</Divider> <div class="virtual-scroll-demo-wrap"> <VirtualScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50"> <template v-slot="{ item }"> <div class="virtual-scroll-demo__item">{{ item.title }}</div> </template> </VirtualScroll> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { VirtualScroll } from '/@/components/VirtualScroll/index'; import { Divider } from 'ant-design-vue'; const data: any[] = (() => { const arr: any[] = []; for (let index = 1; index < 20000; index++) { arr.push({ title: '列表項' + index, }); } return arr; })(); export default defineComponent({ components: { VirtualScroll, Divider }, setup() { return { data: data }; }, }); </script> <style lang="less" scoped> .virtual-scroll-demo { &-wrap { display: flex; margin: 0 30%; background: #fff; justify-content: center; } /deep/ &__item { height: 40px; padding: 0 20px; line-height: 40px; border-bottom: 1px solid #ddd; } } </style> ``` ## Props | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | ---------- | ---------------- | ------ | ------ | ------------------ | | height | `string｜number` | - | - | 高度 | | width | `string｜number` | - | - | 寬度 | | maxHeight | `string｜number` | - | - | 最大高度 | | maxWidth | `string｜number` | - | - | 最大寬度 | | minHeight | `string｜number` | - | - | 最小高度 | | minWidth | `string｜number` | - | - | 最小寬度 | | itemHeight | `string｜number` | - | - | 每個選項高度，必傳 | | items | `any[]` | - | - | 選項列表 | ## Slots | 名稱 | 說明 | | ------- | ---- | | default | 默認 |