1# NavDestination 2 3作为子页面的根容器，用于显示[Navigation](ts-basic-components-navigation.md)的内容区。 4 5> **说明：** 6> 7> - 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - 该组件从API Version 11开始默认支持安全区避让特性(默认值为：expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]))，开发者可以重写该属性覆盖默认行为，API Version 11之前的版本需配合[expandSafeArea](ts-universal-attributes-expand-safe-area.md)属性实现安全区避让。 10> 11> - NavDestination组件必须配合Navigation使用，作为Navigation目的页面的根节点，单独使用只能作为普通容器组件，不具备路由相关属性能力。 12> 13> - 如果页面栈中间页面的生命周期发生变化，跳转之前的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)与跳转之后的栈顶Destination的生命周期(onWillShow, onShown, onHidden, onWillDisappear)均在最后触发。 14> 15> - NavDestination未设置主副标题并且没有返回键时，不显示标题栏。 16 17## 子组件 18 19> **说明：** 20> 21> - 子组件类型：系统组件和自定义组件，支持渲染控制类型（[if/else](../../../quick-start/arkts-rendering-control-ifelse.md)、[ForEach](../../../quick-start/arkts-rendering-control-foreach.md)和[LazyForEach](../../../quick-start/arkts-rendering-control-lazyforeach.md)）。 22> - 子组件个数：多个。 23 24 25## 接口 26 27NavDestination() 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33## 属性 34 35支持[通用属性](ts-universal-attributes-size.md)。 36 37不推荐设置位置、大小等布局相关属性，可能会造成页面显示异常。 38 39### title 40 41title(value: string | CustomBuilder | NavDestinationCommonTitle | NavDestinationCustomTitle | Resource, options?: NavigationTitleOptions) 42 43设置页面标题。使用NavigationCustomTitle类型设置height高度时，[titleMode](ts-basic-components-navigation.md#titlemode)属性不会生效。字符串超长时，如果不设置副标题，先缩小再换行2行后以...截断。如果设置副标题，先缩小后以...截断。 44 45**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 46 47**系统能力：** SystemCapability.ArkUI.ArkUI.Full 48 49**参数：** 50 51| 参数名 | 类型 | 必填 | 说明 | 52| ------ | ------------------------------------------------------------ | ---- | ---------- | 53| value | string \| [CustomBuilder](ts-types.md#custombuilder8) \| [NavDestinationCommonTitle](#navdestinationcommontitle) \| [NavDestinationCustomTitle](#navdestinationcustomtitle) \| [Resource](ts-types.md#resource) | 是 | 页面标题。 | 54| options<sup>12+</sup> | [NavigationTitleOptions](ts-basic-components-navigation.md#navigationtitleoptions11) | 否 | 标题栏选项。 | 55 56### hideTitleBar 57 58hideTitleBar(value: boolean) 59 60设置是否隐藏标题栏。 61 62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| ------ | ------- | ---- | ------------------------------------------------------------ | 70| value | boolean | 是 | 是否隐藏标题栏。<br/>默认值：false<br/>true: 隐藏标题栏。<br/>false: 显示标题栏。 | 71 72### hideTitleBar<sup>13+</sup> 73 74hideTitleBar(hide: boolean, animated: boolean) 75 76设置是否隐藏标题栏，设置是否使用动画显隐标题栏。 77 78**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------ | ------- | ---- | ------------------------------------------------------------ | 86| hide | boolean | 是 | 是否隐藏标题栏。<br/>默认值：false<br/>true: 隐藏标题栏。<br/>false: 显示标题栏。 | 87| animated | boolean | 是 | 设置是否使用动画显隐标题栏。<br/>默认值：false<br/>true: 使用动画显示隐藏标题栏。<br/>false: 不使用动画显示隐藏标题栏。 | 88 89### toolbarConfiguration<sup>13+</sup> 90 91toolbarConfiguration(toolbarParam: Array<ToolbarItem> | CustomBuilder, options?: NavigationToolbarOptions) 92 93设置工具栏内容。未调用本接口时不显示工具栏。 94 95**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 103| toolbarParam | Array<[ToolbarItem](ts-basic-components-navigation.md#toolbaritem10)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 工具栏内容。<br/>使用Array<[ToolbarItem](ts-basic-components-navigation.md#toolbaritem10)>写法设置的工具栏有如下特性：<br/>-工具栏所有选项均分底部工具栏，在每个均分内容区布局文本和图标。<br/>-文本超长时，若工具栏选项个数小于5个，优先拓展选项的宽度，工具栏最大宽度与屏幕等宽，其次逐级缩小，缩小之后换行，最后...截断。<br/>-竖屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标中，点击更多图标，可以展示剩余内容。横屏时，如果为[Split](ts-basic-components-navigation.md#navigationmode9枚举说明)模式，仍按照竖屏规则显示，如果为[Stack](ts-basic-components-navigation.md#navigationmode9枚举说明)模式需配合menus属性的Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)>使用，底部工具栏会自动隐藏，同时底部工具栏所有选项移动至页面右上角菜单。<br/>使用[CustomBuilder](ts-types.md#custombuilder8)写法为用户自定义工具栏选项，除均分底部工具栏外不具备以上功能。 | 104| options | [NavigationToolbarOptions](ts-basic-components-navigation.md#navigationtoolbaroptions11) | 否 | 工具栏选项。 | 105 106> **说明：** 107> 108> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 109 110### hideToolBar<sup>13+</sup> 111 112hideToolBar(hide: boolean, animated?: boolean) 113 114设置是否隐藏工具栏，设置是否使用动画显隐工具栏。 115 116**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 117 118**系统能力：** SystemCapability.ArkUI.ArkUI.Full 119 120**参数：** 121 122| 参数名 | 类型 | 必填 | 说明 | 123| ------ | ------- | ---- | ------------------------------------------------------------ | 124| hide | boolean | 是 | 是否隐藏工具栏。<br/>默认值：false<br/>true: 隐藏工具栏。<br/>false: 显示工具栏。 | 125| animated | boolean | 否 | 设置是否使用动画显隐工具栏。<br/>默认值：false<br/>true: 使用动画显示隐藏工具栏。<br/>false: 不使用动画显示隐藏工具栏。 | 126 127### mode <sup>11+</sup> 128 129mode(value: NavDestinationMode) 130 131设置NavDestination类型，不支持动态修改。 132 133**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 134 135**系统能力：** SystemCapability.ArkUI.ArkUI.Full 136 137**参数：** 138 139| 参数名 | 类型 | 必填 | 说明 | 140| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 141| value | [NavDestinationMode](#navdestinationmode枚举说明-11) | 是 | NavDestination类型。<br/>默认值: NavDestinationMode.STANDARD | 142 143### backButtonIcon<sup>11+</sup> 144 145backButtonIcon(value: ResourceStr | PixelMap | SymbolGlyphModifier) 146 147> **说明：** 148> 149> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 150 151 152设置标题栏返回键图标。 153 154**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 155 156**系统能力：** SystemCapability.ArkUI.ArkUI.Full 157 158**参数：** 159 160| 参数名 | 类型 | 必填 | 说明 | 161| ------ | ------------------------------------------------------------ | ---- | ------------------ | 162| value | [ResourceStr](ts-types.md#resourcestr) \| [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) \| [SymbolGlyphModifier<sup>12+</sup>](ts-universal-attributes-attribute-modifier.md) | 是 | 标题栏返回键图标。 | 163 164### menus<sup>12+</sup> 165 166menus(value: Array<NavigationMenuItem> | CustomBuilder) 167 168> **说明：** 169> 170> 不支持通过SymbolGlyphModifier对象的fontSize属性修改图标大小、effectStrategy属性修改动效、symbolEffect属性修改动效类型。 171 172 173设置页面右上角菜单。不设置时不显示菜单项。使用Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)> 写法时，竖屏最多支持显示3个图标，横屏最多支持显示5个图标，多余的图标会被放入自动生成的更多图标。 174 175**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 176 177**系统能力：** SystemCapability.ArkUI.ArkUI.Full 178 179**参数：** 180 181| 参数名 | 类型 | 必填 | 说明 | 182| ------ | ------------------------------------------------------------ | ---- | ------------------ | 183| value | Array<[NavigationMenuItem](ts-basic-components-navigation.md#navigationmenuitem)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 页面右上角菜单。 | 184 185### ignoreLayoutSafeArea<sup>12+</sup> 186 187ignoreLayoutSafeArea(types?: Array<LayoutSafeAreaType>, edges?: Array<LayoutSafeAreaEdge>) 188 189控制组件的布局，使其扩展到非安全区域 190 191**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198| ------ | -------------------------------------------------- | ---- | ------------------------------------------------------------ | 199| types | Array <[LayoutSafeAreaType](ts-types.md#layoutsafeareatype12)> | 否 | 配置扩展安全区域的类型。<br />默认值: <br />[LayoutSafeAreaType.SYSTEM] | 200| edges | Array <[LayoutSafeAreaEdge](ts-types.md#layoutsafeareaedge12)> | 否 | 配置扩展安全区域的方向。<br /> 默认值: <br />[LayoutSafeAreaEdge.TOP, LayoutSafeAreaEdge.BOTTOM]。| 201 202> **说明：** 203> 204> 组件设置LayoutSafeArea之后生效的条件为： 205> 设置LayoutSafeAreaType.SYSTEM时，组件的边界与非安全区域重合时组件能够延伸到非安全区域下。例如：设备顶部状态栏高度100，组件在屏幕中纵向方位的绝对偏移需要在0到100之间。 206> 207> 若组件延伸到非安全区域内，此时在非安全区域里触发的事件（例如：点击事件）等可能会被系统拦截，优先响应状态栏等系统组件。 208 209### systemBarStyle<sup>12+</sup> 210 211systemBarStyle(style: Optional<SystemBarStyle>) 212 213当Navigation中显示当前NavDestination时，设置对应系统状态栏的样式。 214 215**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 216 217**系统能力：** SystemCapability.ArkUI.ArkUI.Full 218 219**参数：** 220 221| 参数名 | 类型 | 必填 | 说明 | 222| ------ | -------------- | ---- | ------------------ | 223| style | Optional<[SystemBarStyle](../js-apis-window.md#systembarstyle12)> | 是 | 系统状态栏样式。 | 224 225> **说明：** 226> 227> 1. 必须配合Navigation使用，作为其Navigation目的页面的根节点时才能生效。 228> 2. 其他使用限制请参考Navigation对应的[systemBarStyle](ts-basic-components-navigation.md#systembarstyle12)属性说明。 229 230### systemTransition<sup>14+</sup> 231systemTransition(type: NavigationSystemTransitionType) 232 233设置NavDestination系统转场动画，支持分别设置系统标题栏动画和内容动画。 234 235**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 236 237**系统能力：** SystemCapability.ArkUI.ArkUI.Full 238 239**参数：** 240 241| 参数名 | 类型 | 必填 | 说明 | 242| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 243| type | [NavigationSystemTransitionType](#navigationsystemtransitiontype14枚举说明) | 是 | 系统转场动画类型。<br/>默认值: NavigationSystemTransitionType.DEFAULT | 244 245### recoverable<sup>14+</sup> 246 247recoverable(recoverable: Optional<boolean>) 248 249配置NavDestination是否可恢复。如配置为可恢复，当应用进程异常退出并重新冷启动时，可自动创建该NavDestination。该功能需NavDestination对应的Navigation也配置了可恢复属性。 250 251**系统能力：** SystemCapability.ArkUI.ArkUI.Full 252 253**参数：** 254 255| 参数名 | 类型 | 必填 | 说明 | 256| ------ | -------------- | ---- | ------------------ | 257| recoverable | Optional<boolean> | 是 | NavDestination是否可恢复，默认为不可恢复。<br/>默认值:false<br/>true:页面栈可恢复。<br/>false:页面栈不可恢复。 | 258 259> **使用说明：** 260> 261> 该接口需要配合Navigation的[recoverable](./ts-basic-components-navigation.md#recoverable14)接口使用。 262 263### bindToScrollable<sup>14+</sup> 264bindToScrollable(scrollers: Array<Scroller>) 265 266绑定NavDestination组件和可滚动容器组件（支持[List](./ts-container-list.md)、[Scroll](./ts-container-scroll.md)、[Grid](./ts-container-grid.md)、[WaterFlow](./ts-container-waterflow.md)），当滑动可滚动容器组件时，会触发所有与其绑定的NavDestination组件的标题栏和工具栏的显示和隐藏动效。一个NavDestination可与多个可滚动容器组件绑定，一个可滚动容器组件也可与多个NavDestination绑定。使用示例参见[示例1](#示例1)。 267 268> **说明：** 269> 270> - 只有NavDestination的标题栏或工具栏设置为可见时，联动效果才会生效。 271> - 当多个可滚动容器组件绑定了同一个NavDestination组件时，滚动任何一个容器都会触发标题栏和工具栏的显示或隐藏效果。且当任何一个可滚动容器组件滑动到底部或顶部位置时，会立即触发标题栏和工具栏的显示动效。因此，为了获得最佳用户体验，不建议同时触发多个可滚动容器组件的滚动事件。 272 273**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 274 275**系统能力：** SystemCapability.ArkUI.ArkUI.Full 276 277**参数：** 278 279| 参数名 | 类型 | 必填 | 说明 | 280| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 281| scrollers | Array<[Scroller](./ts-container-scroll.md#scroller)> | 是 | 可滚动容器组件的控制器。 | 282 283### bindToNestedScrollable<sup>14+</sup> 284bindToNestedScrollable(scrollInfos: Array<NestedScrollInfo>) 285 286绑定NavDestination组件和嵌套的可滚动容器组件（支持[List](./ts-container-list.md)、[Scroll](./ts-container-scroll.md)、[Grid](./ts-container-grid.md)、[WaterFlow](./ts-container-waterflow.md)），当滑动父组件或子组件时，会触发所有与其绑定的NavDestination组件的标题栏和工具栏的显示和隐藏动效。一个NavDestination可与多个嵌套的可滚动容器组件绑定，嵌套的可滚动容器组件也可与多个NavDestination绑定。使用示例参见[示例1](#示例1)。 287 288> **说明：** 289> 290> - 只有NavDestination的标题栏或工具栏设置为可见时，联动效果才会生效。 291> - 当多个可滚动容器组件绑定了同一个NavDestination组件时，滚动任何一个容器都会触发标题栏和工具栏的显示或隐藏效果。且当任何一个可滚动容器组件滑动到底部或顶部位置时，会立即触发标题栏和工具栏的显示动效。因此，为了获得最佳用户体验，不建议同时触发多个可滚动容器组件的滚动事件。 292 293**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 294 295**系统能力：** SystemCapability.ArkUI.ArkUI.Full 296 297**参数：** 298 299| 参数名 | 类型 | 必填 | 说明 | 300| ------ | ---------------------------------------------------- | ---- | ------------------------------------------------------------ | 301| scrollInfos | Array<[NestedScrollInfo](#nestedscrollinfo14)> | 是 | 嵌套的可滚动容器组件的控制器。 | 302 303## NavDestinationMode枚举说明 <sup>11+</sup> 304 305**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 306 307**系统能力：** SystemCapability.ArkUI.ArkUI.Full 308 309| 名称 | 说明 | 310| ---- | ---------------------------------------- | 311| STANDARD | 标准模式的NavDestination。 | 312| DIALOG | 默认透明，进出页面栈不影响下层NavDestination的生命周期。<br />API version 13之前，默认无系统转场动画。从API version 13开始，支持系统转场动画。 | 313 314## NavigationSystemTransitionType<sup>14+</sup>枚举说明 315 316**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 317 318**系统能力：** SystemCapability.ArkUI.ArkUI.Full 319 320| 名称 | 值 | 说明 | 321| ---- | --- | ----- | 322| DEFAULT | 0 | 默认系统转场动画。| 323| NONE| 1 | 无系统转场动画。| 324| TITLE | 2 | 标题栏系统转场动画。| 325| CONTENT | 3 | 内容区系统转场动画。| 326 327**说明：** 328> 329> 设置系统转场动画，支持分别设置系统标题栏动画和内容动画。 330> 331> 系统默认转场动画中只有STANDARD页面的push和pop动画有单独的标题栏动画，存在如下限制： 332> 1. 设置NavigationSystemTransitionType为TITLE时，系统转场只有标题栏动画。 333> 2. 设置NavigationSystemTransitionType为CONTENT时，系统转场只有内容区动画。 334> 335> 设置NONE或者TITLE时没有系统转场动画，设置CONTENT和DEFAULT时默认系统转场动画。 336 337## 事件 338 339除支持[通用事件](ts-universal-events-click.md)外，还支持如下事件： 340 341### onShown<sup>10+</sup> 342 343onShown(callback: () => void) 344 345当该NavDestination页面显示时触发此回调。 346 347**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 348 349**系统能力：** SystemCapability.ArkUI.ArkUI.Full 350 351### onHidden<sup>10+</sup> 352 353onHidden(callback: () => void) 354 355当该NavDestination页面隐藏时触发此回调。 356 357**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 358 359**系统能力：** SystemCapability.ArkUI.ArkUI.Full 360 361### onWillAppear<sup>12+</sup> 362 363onWillAppear(callback: Callback\<void>) 364 365当该Destination挂载之前触发此回调。在该回调中允许修改页面栈，当前帧生效。 366 367**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 368 369**系统能力：** SystemCapability.ArkUI.ArkUI.Full 370 371### onWillShow<sup>12+</sup> 372 373onWillShow(callback: Callback\<void>) 374 375当该Destination显示之前触发此回调。 376 377**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 378 379**系统能力：** SystemCapability.ArkUI.ArkUI.Full 380 381### onWillHide<sup>12+</sup> 382 383onWillHide(callback: Callback\<void>) 384 385当该Destination隐藏之前触发此回调。 386 387**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 388 389**系统能力：** SystemCapability.ArkUI.ArkUI.Full 390 391### onWillDisappear<sup>12+</sup> 392 393onWillDisappear(callback: Callback\<void>) 394 395当该Destination卸载之前触发的生命周期(有转场动画时，在转场动画开始之前触发)。 396 397**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 398 399**系统能力：** SystemCapability.ArkUI.ArkUI.Full 400 401### onBackPressed<sup>10+</sup> 402 403onBackPressed(callback: () => boolean) 404 405当与Navigation绑定的页面栈中存在内容时，此回调生效。当点击返回键时，触发该回调。 406 407返回值为true时，表示重写返回键逻辑，返回值为false时，表示回退到上一个页面。 408 409**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 410 411**系统能力：** SystemCapability.ArkUI.ArkUI.Full 412 413### onReady<sup>11+</sup> 414 415onReady(callback: [Callback](../../apis-basic-services-kit/js-apis-base.md#callback)<[NavDestinationContext](#navdestinationcontext11)>) 416 417当NavDestination即将构建子组件之前会触发此回调。 418 419**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 420 421**系统能力：** SystemCapability.ArkUI.ArkUI.Full 422 423## NavDestinationCommonTitle 424 425**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 426 427**系统能力：** SystemCapability.ArkUI.ArkUI.Full 428 429| 名称 | 类型 | 必填 | 说明 | 430| ---- | ------ | ---- | ------ | 431| main | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | 设置主标题。 | 432| sub | string \| [Resource<sup>14+<sup>](ts-types.md#resource) | 是 | 设置副标题。 | 433 434## NavDestinationCustomTitle 435 436**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 437 438**系统能力：** SystemCapability.ArkUI.ArkUI.Full 439 440| 名称 | 类型 | 必填 | 说明 | 441| ------- | ---------------------------------------- | ---- | -------- | 442| builder | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 设置标题栏内容。 | 443| height | [TitleHeight](ts-appendix-enums.md#titleheight9) \| [Length](ts-types.md#length) | 是 | 设置标题栏高度。 | 444 445## NavDestinationContext<sup>11+</sup> 446 447**系统能力：** SystemCapability.ArkUI.ArkUI.Full 448 449| 名称 | 类型 | 必填 | 说明 | 450| ---- | ------ | ----- | ------ | 451| pathInfo | [NavPathInfo](ts-basic-components-navigation.md#navpathinfo10) | 是 | 跳转NavDestination时指定的参数。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 452| pathStack | [NavPathStack](ts-basic-components-navigation.md#navpathstack10) | 是 | 当前NavDestination所处的页面栈。 <br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 453| navDestinationId<sup>12+</sup> | string | 否 | 当前NavDestination的唯一ID，由系统自动生成，和组件通用属性id无关。 <br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 454 455### getConfigInRouteMap<sup>12+</sup> 456 457getConfigInRouteMap(): RouteMapConfig |undefined 458 459**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 460 461**系统能力：** SystemCapability.ArkUI.ArkUI.Full 462 463**返回值** 464 465| 类型 | 说明 | 466| --- | --- | 467| [RouteMapConfig](#routemapconfig12) | 当前页面路由配置信息。 | 468| undefined | 当该页面不是通过路由表配置时返回undefined。 | 469 470## RouteMapConfig<sup>12+</sup> 471 472**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 473 474**系统能力：** SystemCapability.ArkUI.ArkUI.Full 475 476| 名称 | 类型 |必填 | 说明 | 477| ---- | --- | ---- |----- | 478| name | string | 是 | 页面名称。| 479| pageSourceFile| string | 是 | 页面在当前包中的路径。| 480| data | Object | 是 | 页面自定义字段信息。| 481 482## NestedScrollInfo<sup>14+</sup> 483 484嵌套可滚动容器组件信息 485 486**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。 487 488**系统能力：** SystemCapability.ArkUI.ArkUI.Full 489 490| 名称 | 类型 |必填 | 说明 | 491| ---- | --- | ---- |----- | 492| parent | [Scroller](./ts-container-scroll.md#scroller) | 是 | 可滚动容器组件的控制器。 | 493| child | [Scroller](./ts-container-scroll.md#scroller) | 是 | 可滚动容器组件的控制器，child对应的组件需要是parent对应组件的子组件，且组件间存在嵌套滚动关系。| 494 495## 示例 496 497### 示例1 498 499以下示例主要演示NavDestination绑定可滚动容器组件来实现滚动内容时触发标题栏和工具栏显示隐藏的效果。 500 501```ts 502import { SymbolGlyphModifier } from '@kit.ArkUI'; 503 504@Component 505struct MyPageOne { 506 private listScroller: Scroller = new Scroller(); 507 private scrollScroller: Scroller = new Scroller(); 508 private arr: number[] = []; 509 510 aboutToAppear(): void { 511 for (let i = 0; i < 30; i++) { 512 this.arr.push(i); 513 } 514 } 515 516 build() { 517 NavDestination() { 518 Scroll(this.scrollScroller) { 519 Column() { 520 List({space: 0, initialIndex: 0, scroller: this.listScroller}) { 521 ForEach(this.arr, (item: number, index: number) => { 522 ListItem() { 523 Text('' + item) 524 .height(100) 525 .fontSize(16) 526 .textAlign(TextAlign.Center) 527 .width('90%') 528 .margin({left: '5%'}) 529 .borderRadius(10) 530 .backgroundColor(Color.Gray) 531 } 532 }, (item: string) => item); 533 }.width('100%').height('80%').scrollBar(BarState.Off) 534 .nestedScroll({scrollForward: NestedScrollMode.SELF_FIRST, scrollBackward: NestedScrollMode.SELF_FIRST}) 535 ForEach(this.arr, (item: number, index: number) => { 536 ListItem() { 537 Text('' + item) 538 .height(100) 539 .fontSize(16) 540 .textAlign(TextAlign.Center) 541 .width('90%') 542 .margin({top: '5%'}) 543 .borderRadius(10) 544 .backgroundColor(Color.Pink) 545 } 546 }, (item: string) => item); 547 } 548 } 549 .width('100%') 550 .scrollBar(BarState.Off) 551 .scrollable(ScrollDirection.Vertical) 552 .edgeEffect(EdgeEffect.Spring) 553 } 554 .title('PageOne', {backgroundColor: Color.Yellow, barStyle: BarStyle.STACK}) 555 .toolbarConfiguration([ 556 { 557 value: 'item1', 558 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star')) 559 } 560 ], {backgroundColor: Color.Orange, barStyle: BarStyle.STACK}) 561 // 绑定有父子关系的可滚动容器组件 562 .bindToNestedScrollable([{parent: this.scrollScroller, child: this.listScroller}]) 563 } 564} 565 566@Component 567struct MyPageTwo { 568 private listScroller: Scroller = new Scroller(); 569 private arr: number[] = []; 570 571 aboutToAppear(): void { 572 for (let i = 0; i < 30; i++) { 573 this.arr.push(i); 574 } 575 } 576 577 build() { 578 NavDestination() { 579 List({scroller: this.listScroller}) { 580 ForEach(this.arr, (item: number, index: number) => { 581 ListItem() { 582 Text('' + item) 583 .height(100) 584 .fontSize(16) 585 .textAlign(TextAlign.Center) 586 .width('90%') 587 .margin({left: '5%'}) 588 .borderRadius(10) 589 .backgroundColor(Color.Gray) 590 } 591 }, (item: string) => item); 592 }.width('100%') 593 } 594 .title('PageTwo', {backgroundColor: Color.Yellow, barStyle: BarStyle.STACK}) 595 .toolbarConfiguration([ 596 { 597 value: 'item1', 598 symbolIcon: new SymbolGlyphModifier($r('sys.symbol.phone_badge_star')) 599 } 600 ], {backgroundColor: Color.Orange, barStyle: BarStyle.STACK}) 601 // 绑定可滚动容器组件 602 .bindToScrollable([this.listScroller]) 603 } 604} 605 606@Entry 607@Component 608struct Index { 609 private stack: NavPathStack = new NavPathStack(); 610 611 @Builder 612 MyPageMap(name: string) { 613 if (name === 'myPageOne') { 614 MyPageOne() 615 } else { 616 MyPageTwo() 617 } 618 } 619 620 build() { 621 Navigation(this.stack) { 622 Column() { 623 Button('push PageOne').onClick(() => { 624 this.stack.pushPath({name: 'myPageOne'}) 625 }) 626 Button('push PageTwo').onClick(() => { 627 this.stack.pushPath({name: 'myPageTwo'}) 628 }) 629 }.height('40%').justifyContent(FlexAlign.SpaceAround) 630 }.width('100%') 631 .height('100%') 632 .title({main: 'MainTitle', sub: 'subTitle'}) 633 .navDestination(this.MyPageMap) 634 } 635} 636``` 637 638 639NavDestination其他用法可参考[Navigation示例](ts-basic-components-navigation.md#示例1)。 640
