Infinite Scroll Component

A customizable component designed to help with setting up infinite scrolling either on the window or a provided element.

Props

| Prop Name | Default Value | Description | |-------------------------|---------------------|-------------------------------------------------------------------------------------------------------------| | data-manual-load | false | Boolean indicating if the control of the items loading should be manual (button) or automatic (scroll) | | data-load-callback | - | Required Function to call to load more items (needs to return a promise) | | data-content-finished | - | Required Booolean that signals the component when there are no more new items to load | | data-root | null | The Element or Document whose bounds are used as the bounding box when testing for intersection. | | data-root-margin | '0px 0px 0px 0px' | A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections. | | data-threshold | 0.10000000149011612 | Either a single number or an array of numbers between 0.0 and 1. |

Slots

| Name | Description | |:-------------------|:-----------------------------------------------------------------------------------------------------------------| | default | Slot that recieves the elements that should be wrapped by the infinite scroll component | | manual-loader | Slot for clickable element to fire up manual load (es: buttons), needs slot prop load the function to load items | | error | Slot for the html to show if an error occurs | | loading | Slot for the animation/spinner to show during loading | | content-finished | Slot for the to show if there aren't more content |

Events

| Event | Payload Type | Description | |-----------|--------------|-----------------------------------------------------------------| | 'loaded' | Array | Emits the value returned from the async function in dataLoader |