Play UIVirtaulList New
New
虚拟列表能在数据量很大的时候依然具有出色的性能表现。
Usage
Hic dolore libero sit laborum facilis illo. Minima perspiciatis dicta quibusdam porro nobis praesentium similique expedita ab. Harum soluta beatae illo officia. Laborum ratione magnam voluptate vero inventore eius.
Perferendis praesentium impedit maiores laboriosam. Eveniet inventore doloribus odit enim laborum placeat dignissimos at praesentium.
Inventore earum unde temporibus illo veritatis. Voluptatum odio doloremque magni quos.
Aliquam earum ipsam animi nihil labore sapiente quo illo placeat. Quos nemo eum veniam officiis dolores perspiciatis. Ducimus eum incidunt nostrum temporibus consequuntur voluptatibus ut molestiae. Enim ut eveniet fuga deserunt itaque dolore et temporibus tempora.
Quidem nobis blanditiis sequi rem voluptatum itaque eum rerum architecto. Molestiae impedit molestiae.
Quibusdam dolores ullam repudiandae impedit. Nemo ipsam porro. Facere rerum eius earum consequatur. Reiciendis eaque doloremque corrupti molestias. Ea repudiandae ad repellat recusandae earum error exercitationem. Illo ipsa commodi fugit.
Eaque facere voluptate possimus quo dignissimos recusandae possimus nam eligendi. Cum consectetur atque molestiae tempora deleniti quisquam. Pariatur reprehenderit nihil impedit temporibus voluptatibus numquam nesciunt molestias. Amet itaque repellendus sint sed.
Excepturi voluptas veniam. Alias corrupti numquam numquam tempora sequi architecto. Sed consectetur expedita sit reprehenderit enim doloremque aspernatur. Nihil ipsam quae magnam voluptatibus perspiciatis labore maiores exercitationem atque. Veniam velit voluptatem beatae a natus.
<template>
<div class="w-full light:text-black dark:text-white">
<PlVirtualList
:list-height="400"
:list-item-count="list.length"
:estimated-list-item-height="50"
>
<PlVirtualListItem v-for="(item, index) in list" :key="index">
<div class="p-2">
{{ item }}
</div>
</PlVirtualListItem>
</PlVirtualList>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { faker } from '@faker-js/faker'
const list = ref(
Array(10000)
.fill(null)
.map(_ => faker.lorem.sentences()),
)
</script><template>
<div class="w-full light:text-black dark:text-white">
<PlVirtualList
:list-height="400"
:list-item-count="list.length"
:estimated-list-item-height="50"
>
<PlVirtualListItem v-for="(item, index) in list" :key="index">
<div class="p-2">
{{ item }}
</div>
</PlVirtualListItem>
</PlVirtualList>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { faker } from '@faker-js/faker'
const list = ref(
Array(10000)
.fill(null)
.map(_ => faker.lorem.sentences()),
)
</script>Props
| Name | Type | Default | Description |
|---|---|---|---|
| listHeight | number | 虚拟列表高度。 | |
| listItemCount | number | 0 | 虚拟列表子项个数。 |
| estimatedListItemHeight | number | 虚拟列表预估高度。 |