Infinite Scroll #
The va-infinite-scroll component is a wrapper component which is intended to be used to create lists with dynamically added content. It provides rich interface to customize scrolling behavior and much more.
Examples #
Default #
Just wrap your content in va-infinite-scroll component and provide load callback, and you'll see it's called each time list is scrolled till the bottom.
Reverse #
With reverse prop you can prepend content to your list. Might be useful in messenger windows.
Disabled #
In case you need to prevent a list from loading more content, disabled prop is here for you.
Custom scroll target container #
Provide either DOM element or CSS Selector to be used instead of default scroll container.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| debounce |
|
| |
| disabled |
|
| |
| load required |
| - | |
| load | Function that loads data. Should return Promise |
| |
| offset |
|
| |
| preset |
| - | |
| reverse |
|
| |
| scrollTarget |
| - | |
| tag |
|
|
Events #
| Name | Description |
|---|---|
onerror | Emits when |
onload | Emits when |
Slots #
| Name | Description |
|---|---|
default | The content to be scrolled |
loading | Shown when content is fetching. |
Css Variables #
| Name | Default Value |
|---|---|
| --va-infinite-scroll-display | flex |
| --va-infinite-scroll-flex-direction | column |
| --va-infinite-scroll-spinner-default-width | 100% |
| --va-infinite-scroll-spinner-default-min-height | 70px |
| --va-infinite-scroll-reversed-flex-direction | column-reverse |