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