菜单 · 组件

最后更新:2026年8月12日

组件

页内锚点导航:点击导航项跳转到指定区块,滚动时自动高亮当前可见区块。

Anchor

页内锚点导航(scrollspy)。左侧导航列表点击后让右侧 Scroll 滚动到对应区块顶部,滚动过程中自动高亮当前可见区块。

用法

Anchor {
    scroll_duration: 300,
    nav: rsx! {
        column {
            AnchorItem { id: "intro".to_string(), title: "Introduction".to_string() }
            AnchorItem { id: "install".to_string(), title: "Installation".to_string() }
        }
    },
    children: rsx! {
        column {
            width: "100%",
            AnchorSection {
                id: "intro".to_string(),
                children: rsx! { /* 区块内容 */ }
            }
            AnchorSection {
                id: "install".to_string(),
                children: rsx! { /* 区块内容 */ }
            }
        }
    },
}

Anchor 渲染 row { nav, scroll }nav 通常是一列 AnchorItemchildren 内放置一组 AnchorSection。区块位置通过 use_native_element_ref + use_layout_frame 测量(物理像素),滚动使用 <scroll>scroll_offset 一次性命令(vp),经 WindowMetricsHandle.scale 换算;onscroll 的 vp 增量累积为当前位置,与注册的区块帧比较得出激活项。

Props

Anchor

Prop类型默认说明
navElement左侧导航内容(通常是一列 AnchorItem
childrenElement右侧滚动内容(通常是一组 AnchorSection
scroll_refOption<NativeElementRef>自建外部 scroll ref,传入后调用方可以额外观察滚动容器
scroll_barOption<String>"auto"滚动条策略:"off" / "auto" / "on"
scroll_durationu320跳转动画时长(ms),0 = 瞬跳
active_thresholdf320.0区块判定为”已进入视口”的阈值(vp),避免区块边界闪烁

scroll_duration / active_threshold 只在挂载时生效,运行期修改不回传上下文。

AnchorSection

Prop类型说明
idString区块 id,需在最近的 Anchor 内唯一
childrenElement区块内容

包一层 column { width: "100%" } 并注册其测量位置到最近的 Anchor,卸载时自动注销。

AnchorItem

Prop类型默认说明
idString对应 AnchorSection 的 id
titleString导航文案
activeOption<bool>自动计算手动指定激活态
onclickOption<EventHandler<()>>点击回调

点击时滚动到对应区块;activeNone 时随滚动自动高亮。

use_anchor()

pub fn use_anchor() -> Option<AnchorContext>

读取最近的 Anchor 上下文(必须在 Anchor 子树内调用),返回:

方法说明
jump(id)滚动到指定区块顶部
active_id()当前激活区块 id
scroll_position()当前滚动位置(vp)