Function leptos_use::use_infinite_scroll

pub fn use_infinite_scroll<El, T, LFn, LFut>(
    el: El,
    on_load_more: LFn,
) -> Signal<bool>
where
    El: Into<ElementMaybeSignal<T, Element>> + Clone + 'static,
    T: Into<Element> + Clone + 'static,
    LFn: Fn(ScrollState) -> LFut + 'static,
    LFut: Future<Output = ()>,

Infinite scrolling of the element.

Demo

Link to Demo

Usage

use leptos::html::Div;
let el = create_node_ref::<Div>();

let (data, set_data) = create_signal(vec![1, 2, 3, 4, 5, 6]);

let _ = use_infinite_scroll_with_options(
    el,
    move |_| async move {
        let len = data.with(|d| d.len());
        set_data.update(|data| *data = (1..len+6).collect());
    },
    UseInfiniteScrollOptions::default().distance(10.0),
);

view! {
    <div node_ref=el>
        <For each=move || data.get() key=|i| *i let:item>{ item }</For>
    </div>
}

The returned signal is true while new data is being loaded.