Theme:
Ui3nVirtualScroll
Virtual scroll component for efficiently rendering large lists by only rendering visible items.
Props
| Name | Type | Default | Description |
|---|---|---|---|
items* | T[] | — | List of items to render |
minChildHeight* | number | 16 | Minimum height of child element |
renderAhead | number | undefined | 20 | Number of items to render ahead |
stickToBottom | boolean | undefined | false | When true, if the user is near the bottom of the list, keep the viewport stuck to the bottom after items update (typical chat behavior). Default: false. |
stickToBottomThreshold | number | undefined | 32 | Distance from the bottom (px) treated as "near bottom" for stickToBottom. Default: 32. |
reachEdgeThreshold | number | undefined | 64 | Distance from an edge (px) at which 'reached-top' / 'reached-bottom' fire. Default: 64. |
Events
| Event Name | Arguments / Value Type | Description |
|---|---|---|
scroll | Event | — |
reached-top | | The list has been scrolled close to its top - the moment to load a previous page of items. Fires once per approach: it will not repeat until the list leaves the edge or 'items' change. |
reached-bottom | | Same as 'reached-top', for the bottom edge. |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#item | { value: T; index: number; } | Item slot |
Usage Examples
Simple virtual scroll
Simple virtual scroll
Basic virtual scroll with large list
Virtual scroll with custom rendering
Virtual scroll with custom rendering
Virtual scroll with custom item template