VirtualList

Virtualized list for long data sets with lower DOM cost.

Basic Usage

Demo will load when visible.

<script setup lang="ts">
const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
</script>

<template>
  <TxVirtualList :items="items" :item-height="36" height="240px">
    <template #item="{ item, index }">
      <div style="padding: 6px 12px; width: 100%;">
        {{ index + 1 }}. {{ item }}
      </div>
    </template>
  </TxVirtualList>
</template>

API

TxVirtualList Props

Name	Type	Default	Description
`items`	`any[]`	`[]`	Data items
`itemHeight`	`number`	-	Item height
`height`	`number \| string`	`320`	Container height
`overscan`	`number`	`4`	Pre-render count
`itemKey`	`string \| (item, index) => string \| number`	`index`	Unique key

Events

Event	Payload	Description
`scroll`	`({ scrollTop, startIndex, endIndex })`	Scroll event

Slots

Name	Description
`item`	Custom item renderer

Expose

Name	Description
`scrollToIndex(index)`	Scroll to index
`scrollToTop()`	Scroll to top
`scrollToBottom()`	Scroll to bottom