Load data on scroll

Live demo

A renderless logical component that automatically triggers data loading when the user scrolls near the end of the visible content area. It's designed to support infinite scroll behavior.

Node name : load-data-on-scroll

Attributes

Attribute	Type	Required	Default value	Description
direction	`string (vertical, horizontal)`	`false`	`horizontal` if inside a `<horizontal-layout wrap="false">`, otherwise `vertical`.	Defines the direction of the scroll.
has-more-data	`bool`	`false`	Bound to the `HasMoreData` property of the UI view model.	Indicates whether more data can be loaded.
on-load	`string`	`false`	Bound to the `LoadMoreDataAsync` method of the UI view model.	Name of the method invoked when more data needs to be loaded. Typically an asynchronous method handling data fetching.

Examples

Vertical scroll with UI view datasource

<vertical-layout layout:height="fill">
    <load-data-on-scroll>
        <repeat values="@Datasource">
            <card>
                <text>$Item.Name</text>
            </card>
        </repeat>
    </load-data-on-scroll>
</vertical-layout>

Horizontal scroll with UI view datasource

<horizontal-layout wrap="false" layout:height="fill" layout:width="fill">
    <load-data-on-scroll>
        <repeat values="@Datasource">
            <card>
                <text>$Item.Name</text>
            </card>
        </repeat>
    </load-data-on-scroll>
</vertical-layout>

Grid layout with vertical scroll and UI view datasource

<grid-layout layout:height="fill">
    <grid-layout-definition>
        <grid-layout-rows auto-height="fit" />
        <grid-layout-columns>
            <grid-layout-column />
            <grid-layout-column />
            <grid-layout-column />
        </grid-layout-columns>
    </grid-layout-definition>
    <grid-layout-content>
        <load-data-on-scroll>
            <repeat values="@Datasource">
                <card>
                    <text>$Item.Name</text>
                </card>
            </repeat>
        </load-data-on-scroll>
    </grid-layout-content>
</grid-layout>

Manual binding on an unbound source (e.g. a field)

<vertical-layout layout:height="fill">
    <load-data-on-scroll has-more-data="@Fields.HasMoreProducts" on-load="LoadMoreProductsAsync">
        <repeat values="@Fields.Products">
            <card>
                <text>$Item.Name</text>
            </card>
        </repeat>
    </load-data-on-scroll>
</vertical-layout>