提交 99f9d809 编写于 作者: W wangyihui

Navigation能力增强配套资料

Signed-off-by: Nwangyihui <wangyihui16@huawei.com>
Change-Id: Ibd3243e881249d55b92c630b9f02de862dc6155e
上级 3d0cc78d
......@@ -31,4 +31,11 @@ NavDestination()
## 事件
支持[通用事件](ts-universal-events-click.md)
\ No newline at end of file
除支持[通用事件](ts-universal-events-click.md)外,还支持如下事件:
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onShown(callback:&nbsp;(param:&nbsp;unknown)&nbsp;=&gt;&nbsp;void)<sup>10+</sup> | 当该NavDestination页面显示时触发此回调。param表示当前页面的详细参数信息。<br/>**说明:** <br/>后续onShown接口将修改为onShown(callback:&nbsp;()&nbsp;=&gt;&nbsp;void) |
| onHidden(callback:&nbsp;()&nbsp;=&gt;&nbsp;void)<sup>10+</sup> | 当该NavDestination页面隐藏时触发此回调。 |
| onBackPressed(callback:&nbsp;()&nbsp;=&gt;&nbsp;boolean)<sup>10+</sup> | 当点击返回键时,触发该回调。<br/>返回值为true时,表示重写返回键逻辑,返回值为false时,表示回退到上一个页面。<br/> |
......@@ -14,8 +14,17 @@ Navigation组件一般作为Page页面的根容器,通过属性设置来展示
## 接口
Navigation()
**方法1:** Navigation()
**方法2:** Navigation(pathInfos: NavPathStack)<sup>10+</sup>
绑定路由栈到Navigation组件。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ----------------------------------- | ---- | ------------- |
| pathInfos | [NavPathStack](#navpathstack10) | 否 | 路由栈信息。 |
## 属性
......@@ -36,7 +45,209 @@ Navigation()
| mode<sup>9+</sup> | [NavigationMode](#navigationmode枚举说明) | 导航栏的显示模式。<br/>默认值:NavigationMode.Auto<br/>自适应:基于组件宽度自适应单栏和双栏。 |
| backButtonIcon<sup>9+</sup> | string&nbsp;\|&nbsp;[PixelMap](../apis/js-apis-image.md#pixelmap7)&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置导航栏返回图标。不支持隐藏NavDestination组件标题栏中的返回图标。 |
| hideNavBar<sup>9+</sup> | boolean | 是否显示导航栏(仅在mode为NavigationMode.Split时生效)。 |
| navDestination<sup>10+</sup> | builder: (name: string, param: unknown) => void | 创建NavDestination组件。<br/>**说明:** <br/>使用builder函数,基于name和param构造NavDestination组件。builder中允许在NavDestination组件外包含一层自定义组件, 但自定义组件不允许设置属性和事件,否则仅显示空白。 |
## NavPathStack<sup>10+</sup>
Navigation路由栈。
### push<sup>10+</sup>
push(info: NavPathInfo): void
将info指定的NavDestination页面信息入栈。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| info | [NavPathInfo](#navpathinfo10) | 是 | NavDestination页面的信息。 |
### pushName<sup>10+</sup>
pushName(name: string, param: unknown): void
将name指定的NavDestination页面信息入栈,传递的数据为param。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| name | string | 是 | NavDestination页面名称。 |
| param | unknown | 是 | NavDestination页面详细参数。 |
### pop<sup>10+</sup>
pop(): NavPathInfo | undefined
弹出路由栈栈顶元素。
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| NavPathInfo | 返回栈顶NavDestination页面的信息。 |
| undefined | 当路由栈为空时返回undefined。 |
### popTo<sup>10+</sup>
popTo(name: string): number
回退路由栈到第一个名为name的NavDestination页面。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| name | string | 是 | NavDestination页面名称。 |
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| number | 如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的索引,否则返回-1。 |
### popToIndex<sup>10+</sup>
popToIndex(index: number): void
回退路由栈到index指定的NavDestination页面。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| index | number | 是 | NavDestination页面的位置索引。 |
### moveToTop<sup>10+</sup>
moveToTop(name: string): number
将第一个名为name的NavDestination页面移到栈顶。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| name | string | 是 | NavDestination页面名称。 |
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| number | 如果栈中存在名为name的NavDestination页面,则返回第一个名为name的NavDestination页面的当前索引,否则返回-1。 |
### moveIndexToTop<sup>10+</sup>
moveIndexToTop(index: number): void
将index指定的NavDestination页面移到栈顶。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| index | number | 是 | NavDestination页面的位置索引。 |
### clear<sup>10+</sup>
clear(): void
清除栈中所有页面。
### getAllPathName<sup>10+</sup>
getAllPathName(): Array<string\>
获取栈中所有NavDestination页面的名称。
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| Array<string\> | 返回栈中所有NavDestination页面的名称。 |
### getParamByIndex<sup>10+</sup>
getParamByIndex(index: number): unknown | undefined
获取index指定的NavDestination页面的参数信息。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| index | number | 是 | NavDestination页面的位置索引。 |
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| unknown | 返回对应NavDestination页面的参数信息。 |
| undefined | 传入index无效时返回undefined。 |
### getParamByName<sup>10+</sup>
getParamByName(name: string): Array<unknown\>
获取全部名为name的NavDestination页面的参数信息。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| name | string | 是 | NavDestination页面名称。 |
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| Array<unknown\> | 返回全部名为name的NavDestination页面的参数信息。 |
### getIndexByName<sup>10+</sup>
getIndexByName(name: string): Array<number\>
获取全部名为name的NavDestination页面的位置索引。
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| name | string | 是 | NavDestination页面名称。 |
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| Array<number\> | 返回全部名为name的NavDestination页面的位置索引。 |
### size<sup>10+</sup>
size(): number
获取栈大小。
**返回值:**
| 类型 | 说明 |
| ------ | -------- |
| number | 返回栈大小。 |
## NavPathInfo<sup>10+</sup>
路由页面信息。
### constructor
constructor(name: string, param: unknown)
**参数:**
| 名称 | 类型 | 必填 | 描述 |
| ------ | ----------------------- | ---- | --------------- |
| name | string | 是 | NavDestination页面名称。 |
| param | unknown | 否 | NavDestination页面详细参数。 |
## NavigationMenuItem类型说明
......
......@@ -20,8 +20,41 @@
## 接口
NavRouter()
**方法1:** NavRouter()
**方法2:** NavRouter(value: RouteInfo)<sup>10+</sup>
提供路由信息,指定点击NavRouter时,要跳转的NavDestination页面。
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------- | ----------------------------------- | ---- | ------------- |
| value | [RouteInfo](#routeinfo10对象说明) | 否 | 路由信息 |
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 |
| ----------------------------- | ---------------------------------------- | ---------------------------------------- |
| mode | [NavRouteMode](#navroutemode枚举类型说明) | 指定点击NavRouter跳转到NavDestination页面时,使用的路由模式。<br/>默认值:NavRouteMode.PUSH_WITH_RECREATE<br/> |
## RouteInfo<sup>10+</sup>对象说明
| 名称 | 参数类型 | 必填 | 描述 |
| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| name | string | 是 | 点击NavRouter跳转到的NavDestination页面的名称。 |
| param | unknown | 否 | 点击NavRouter跳转到NavDestination页面时,传递的参数。 |
## NavRouteMode枚举类型说明
| 名称 | 描述 |
| ----- | ---------------- |
| PUSH_WITH_RECREATE | 跳转到新的NavDestination页面时,替换当前显示的NavDestination页面,页面销毁,但该页面信息仍保留在路由栈中。 |
| PUSH | 跳转到新的NavDestination页面时,覆盖当前显示的NavDestination页面,该页面不销毁,且页面信息保留在路由栈中。 |
| REPLACE | 跳转到新的NavDestination页面时,替换当前显示的NavDestination页面,页面销毁,且该页面信息从路由栈中清除。 |
## 事件
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册