| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper class="virtual-scroll-demo"> |
| 2f6253 | 3 | <Divider>基础滚动示例</Divider> |
| 陈 | 4 | <div class="virtual-scroll-demo-wrap"> |
| 6b3195 | 5 | <VScroll :itemHeight="41" :items="data" :height="300" :width="300"> |
| 2f6253 | 6 | <template v-slot="{ item }"> |
| 陈 | 7 | <div class="virtual-scroll-demo__item">{{ item.title }}</div> |
| 8 | </template> | |
| 6b3195 | 9 | </VScroll> |
| 2f6253 | 10 | </div> |
| 陈 | 11 | |
| 03b602 | 12 | <Divider>即使不可见，也预先加载50条数据，防止空白</Divider> |
| 2f6253 | 13 | <div class="virtual-scroll-demo-wrap"> |
| 6b3195 | 14 | <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50"> |
| 2f6253 | 15 | <template v-slot="{ item }"> |
| 陈 | 16 | <div class="virtual-scroll-demo__item">{{ item.title }}</div> |
| 17 | </template> | |
| 6b3195 | 18 | </VScroll> |
| 2f6253 | 19 | </div> |
| 31ff05 | 20 | </PageWrapper> |
| 2f6253 | 21 | </template> |
| 陈 | 22 | <script lang="ts"> |
| 23 | import { defineComponent } from 'vue'; | |
| 6b3195 | 24 | import { VScroll } from '/@/components/VirtualScroll/index'; |
| 2f6253 | 25 | |
| 陈 | 26 | import { Divider } from 'ant-design-vue'; |
| 31ff05 | 27 | import { PageWrapper } from '/@/components/Page'; |
| V | 28 | const data: Recordable[] = (() => { |
| 29 | const arr: Recordable[] = []; | |
| 2f6253 | 30 | for (let index = 1; index < 20000; index++) { |
| 陈 | 31 | arr.push({ |
| 32 | title: '列表项' + index, | |
| 33 | }); | |
| 34 | } | |
| 35 | return arr; | |
| 36 | })(); | |
| 37 | export default defineComponent({ | |
| 31ff05 | 38 | components: { VScroll: VScroll, Divider, PageWrapper }, |
| 2f6253 | 39 | setup() { |
| 陈 | 40 | return { data: data }; |
| 41 | }, | |
| 42 | }); | |
| 43 | </script> | |
| 44 | <style lang="less" scoped> | |
| 45 | .virtual-scroll-demo { | |
| 46 | &-wrap { | |
| 47 | display: flex; | |
| 48 | margin: 0 30%; | |
| 49 | background: #fff; | |
| 50 | justify-content: center; | |
| 51 | } | |
| 52 | ||
| 16117a | 53 | &__item { |
| 2f6253 | 54 | height: 40px; |
| 陈 | 55 | padding: 0 20px; |
| 56 | line-height: 40px; | |
| 57 | border-bottom: 1px solid #ddd; | |
| 58 | } | |
| 59 | } | |
| 60 | </style> | |
