需求说明
应用场景中,假设有两个页面 A 和 B,A 页面宫格导航栏菜单与B页面侧边选项卡菜单相互对应,现有需求:
单击 A 页面宫格导航某一个菜单跳转至 B 页面,希望 B 页面侧边选项卡默认显示 A 页面对应单击的菜单。
从其他页面返回 B 页面,希望 B 页面的默认选中项保持之前的选中状态。
![](https://qcloudimg.tencent-cloud.cn/image/document/a2db45c26567b11f43d98b963d425fb9.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/a2db45c26567b11f43d98b963d425fb9.png)
实现思路
场景一:宫格导航页面与侧边选项卡页面选项相互关联
1. 新建宫格导航页面和侧边选项卡页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/2e13f6a09e5b3a891f0154a7651fbc10.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/2e13f6a09e5b3a891f0154a7651fbc10.png)
2. 设置宫格导航菜单路由以及传参(以导航1和导航2设置为例),单击每一个菜单会传递不同的参数到侧边选项卡目标页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/b32d7af1ccb8b8937415bd5fbeb5505e.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/b32d7af1ccb8b8937415bd5fbeb5505e.png)
3. 侧边选项卡页面接收参数,侧边选项卡选中标签绑定默认入参。
![](https://qcloudimg.tencent-cloud.cn/image/document/336724f0e0badba81eb6d1397db4a694.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/336724f0e0badba81eb6d1397db4a694.png)
4. 打开侧边选项卡内容插槽开关,切换侧边选项可以展示不同的组件内容。
![](https://qcloudimg.tencent-cloud.cn/image/document/0d20ad8a2bb01b3dafded11485ec2523.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0d20ad8a2bb01b3dafded11485ec2523.png)
5. 返回宫格导航页面,单击菜单导航4,侧边选项卡页面效果展示。
![](https://qcloudimg.tencent-cloud.cn/image/document/0e86828fcfeb51316cbf2928643c8cf4.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/0e86828fcfeb51316cbf2928643c8cf4.png)
场景二:从其他页面返回侧边选项页面保持之前选中状态
1. 在侧边选择卡页面设置点击事件,配置如下。
![](https://qcloudimg.tencent-cloud.cn/image/document/20a4c92f3a676205e76e70122d781947.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/20a4c92f3a676205e76e70122d781947.png)
2. 侧边选项卡页面新建全局变量 var1,默认值是1、添加执行事件。
![](https://qcloudimg.tencent-cloud.cn/image/document/7a50fc9191f7944b4884140482f6e101.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/7a50fc9191f7944b4884140482f6e101.png)
3. 目标页面以表单容器为例,表单场景选择更新,并绑定数据标识(为上一页面传递过来的参数_id)。
![](https://qcloudimg.tencent-cloud.cn/image/document/60a7ef55ea85ede84b1f69d39a34bd01.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/60a7ef55ea85ede84b1f69d39a34bd01.png)
4. 目标页面表单提交事件新增返回上一页事件。
![](https://qcloudimg.tencent-cloud.cn/image/document/9b5f296c1ea0bc5031161dd9cbe0189a.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/9b5f296c1ea0bc5031161dd9cbe0189a.png)
5. 效果展示,在侧边选项卡页面单击前往目标页面。
![](https://qcloudimg.tencent-cloud.cn/image/document/6f6895a9969e136608a911aebbe5005c.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/6f6895a9969e136608a911aebbe5005c.png)
6. 目标页面执行表单更新事件,这里以更新问题标题为例,执行成功后,自动返回上一页,可以看的侧边选项卡默认选中之前的选项“导航2”且相关内容已经更新。
![](https://qcloudimg.tencent-cloud.cn/image/document/c4be9fa3e795b160dff301e458fc7a15.png)
![](https://qcloudimg.tencent-cloud.cn/image/document/c4be9fa3e795b160dff301e458fc7a15.png)