Function freya::components::VirtualScrollView

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

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}"
                }
            }
        }
    })
}