Virtual Scroller #
The va-virtual-scroller
component allows you to use long lists without need to render every list child element but only visible ones depending on the current state of the scroll.
Examples #
Default #
Horizontal #
The horizontal
prop allows you to change component's orientation.
Bench #
The bench
prop allows you to make scrolling smooth by rendering additional but not visible items at the start or end of the list. For example, bench
prop with value 10
will render additional ~10 items before the visible list start and ~10 after the visible list end.
Custom Key #
The trackBy
prop allows you to specify the key name for list items rendering.
Item Size #
The itemSize
prop allows you to specify the list item size (width or height - depends on horizontal
prop value). For example, acceptable values are: 5, "5", "5px", "5rem". The component is recalculating average item's size ourselves on every scroll event and max value (itemSize
or calculated one) will be used. We recommend to set at least minimal item size via this prop to prevent possible performance issues during first rendering.
Any list items #
va-virtual-scroller
component allows you to create not only 'modest' list with primitive elements but also use it for scrolling card, table rows etc.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
bench | Amount of items will be rendered before and after visible part of the list (for smooth scrolling). |
|
|
disabled | Applies |
|
|
horizontal | Sets component state to horizontal orientation. |
|
|
items | Array of list items. |
|
|
itemSize | Average size (width or height) of the list items (can be number or string with "px"/"rem" value). |
|
|
table | Switches component to work with table rows. |
|
|
trackBy | Property name for identifying item. |
|
|
wrapperSize | Size (width or height) of the component's viewport (can be number or string with "px"/"rem" value). |
|
|
Events #
Name | Description |
---|---|
scroll:bottom |
Slots #
Name | Description |
---|---|
content | Slot to overwrite entire component's template (in case of complicated integrations). |
default | Slot for repeating content template. |