shadow
Infinite Scroll allows you to implement dynamic data loading as users scroll through more content. The element allows you to view any content from a selected endpoint without requiring further interaction, such as clicking the "Load more" button or a link to the next page. The component also displays a loader indicator to inform users when new content is being loaded.
The size attribute defines the number of items each time new content is loaded.
The Infinite scroll element can be used in combination with any Elements element. For example Card.
totalPages
| Description | Sets the numeric value used for total-pages. |
| Attribute | total-pages |
| Type | number |
| Default | 0 |
| Description | Defines the list of values managed through is-loading. |
| Attribute | is-loading |
| Type | array |
| Default | [] |
| Description | Controls how iterate behaves in the component. |
| Attribute | iterate |
| Type | null |
| Default | null |
| Name | Description |
|---|
wje-infinite-scroll:click-item | Event fired when an item is clicked. |
wje-infinite-scroll:start | Emitted when the wje-infinite-scroll:start event is dispatched. |
wje-infinite-scroll:load | Emitted when async content finishes loading. |
wje-infinite-scroll:finish | Emitted when the wje-infinite-scroll:finish event is dispatched. |
wje-infinite-scroll:complete | Emitted when the wje-infinite-scroll:complete event is dispatched. |
getPages
| Description | Fetches the pages from the server. |
| Signature | (page: number) => Promise<object> |
| Description | Hides the loader. |
| Signature | () => void |
| Description | Displays the loader element by adding the 'show' class to its class list. This method is useful for indicating a loading or processing state in the UI. |
| Signature | () => void |
hasMorePages
| Description | Checks if there are more pages to load. |
| Signature | (page: number) => boolean |
loadPages
| Description | Loads the pages. |
| Signature | (page: number) => void |
| Description | Adds item to the managed component collection. |
| Signature | (item: any, place: any) => void |
| Description | Removes item from the current component state. |
| Signature | (item: any) => void |
| Description | Resets component state back to its initial values. |
| Signature | () => void |
| Name | Description |
|---|
loader | The loader part of the infinite scroll. |
| Name | Description |
|---|
--wje-infinite-scroll-width | Sets the width of the infinite scroll container. his property determines how wide the infinite scroll area will be relative to its parent element. Accepts any valid CSS width value, such as percentages (%), pixels (px), or viewport units (vw). The default value is 100%, which makes it span the full width of its container. |
--wje-infinite-scroll-height | Defines the height of the infinite scroll container. This property specifies how tall the infinite scroll area should be. Accepts any valid CSS height value, such as pixels (px), percentages (%), or viewport units (vh). The default value is 300px, providing a fixed height suitable for most use cases. |
| Name | Description |
|---|
default | The default slot for the infinite scroll. |