Function freya::components::VirtualScrollView

source ·
pub fn VirtualScrollView<Builder, BuilderArgs>(
    props: VirtualScrollViewProps<Builder, BuilderArgs>
) -> Option<VNode>
where Builder: Clone + Fn(usize, &Option<BuilderArgs>) -> Option<VNode>, BuilderArgs: Clone + PartialEq,
Expand description

One-direction scrollable area that dynamically builds and renders items based in their size and current available size, this is intended for apps using large sets of data that need good performance.

Use cases: text editors, chats, etc.

§Example

fn app() -> Element {
    rsx!(VirtualScrollView {
        length: 5,
        item_size: 80.0,
        direction: "vertical",
        builder: move |i, _other_args: &Option<()>| {
            rsx! {
                label {
                    key: "{i}",
                    height: "80",
                    "Number {i}"
                }
            }
        }
    })
}

§With a Scroll Controller

fn app() -> Element {
    let mut scroll_controller = use_scroll_controller(|| ScrollConfig::default());

    rsx!(VirtualScrollView {
        scroll_controller,
        length: 5,
        item_size: 80.0,
        direction: "vertical",
        builder: move |i, _other_args: &Option<()>| {
            rsx! {
                label {
                    key: "{i}",
                    height: "80",
                    onclick: move |_| {
                         scroll_controller.scroll_to(ScrollPosition::Start, ScrollDirection::Vertical);
                    },
                    "Number {i}"
                }
            }
        }
    })
}