use_infinite_scroll
Infinite scrolling of the element.
Demo
Usage
use leptos::*;
use leptos::html::Div;
use leptos_use::{use_infinite_scroll_with_options, UseInfiniteScrollOptions};
#[component]
fn Demo() -> impl IntoView {
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.
Feature
This function is only available if the crate feature
use_infinite_scroll
is enabled