VirtualScroll
虚拟滚动组件
用于大量数据纯展示时使用
Usage
<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 | 默认 |