Play UIVirtaulList New
New
Virtual lists can still exhibit excellent performance even when there is a large amount of data.
Usage
Velit cupiditate nulla recusandae optio minima eos consequatur sint perferendis. Aliquam aut iusto earum a eaque cupiditate. Facere a fugit sed numquam ut accusantium voluptatem officia vero.
Facere deleniti labore aperiam at recusandae expedita porro. Tenetur perferendis ipsam. Eaque aliquam reprehenderit amet tempore. Mollitia unde ullam ipsam aliquid. Officiis et asperiores quas. Voluptate maiores porro ullam maiores ea odio fugit odit molestias.
Magni modi perspiciatis laborum atque voluptatum dolorem. Natus architecto excepturi. Aliquid odio alias atque maiores eius expedita fugit. Odit amet architecto ullam.
Tempore assumenda alias. Numquam mollitia explicabo est provident. Expedita amet animi minima quia quisquam. Quo natus deserunt quas voluptas cumque omnis.
Expedita deleniti repellendus. Commodi ullam dolores quae. Ab ullam vitae atque dignissimos.
Ratione rerum sunt voluptate. Quidem praesentium deserunt sapiente distinctio nesciunt sapiente. Ipsa veniam enim cupiditate ea veniam maiores. Tempore omnis sequi nisi minus ipsam incidunt facilis minus. Quis amet quisquam laboriosam dolorum.
Ipsum porro doloremque recusandae ex eveniet. Eius ipsa nihil commodi nobis quos.
Vel soluta dolorem ipsa magnam nemo quis. Harum fugit labore ullam voluptate minima maiores consectetur eaque ipsa. Occaecati temporibus magni ab exercitationem repellendus magnam magnam enim. A amet molestias libero recusandae illum ea perferendis maiores adipisci. Nisi commodi cupiditate facere inventore eos quo repellat neque.
<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 | virtual list height. | |
| listItemCount | number | 0 | virtual list children count. |
| estimatedListItemHeight | number | virtual list estimated height. |