评论

宫格导航与侧边选项卡的选项关联

微搭应用实践

需求说明

应用场景中,假设有两个页面A和B,A页面宫格导航栏菜单与B页面侧边选项卡菜单相互对应,现有需求:

  • 点击A页面宫格导航某一个菜单跳转至B页面,希望B页面侧边选项卡默认显示A页面对应点击的菜单。
  • 从其他页面返回B页面,希望B页面的默认选中项保持之前的选中状态。

实现思路

场景一:宫格导航页面与侧边选项卡页面菜单相互关联

1. 新建宫格导航页面和侧边选项卡页面。

2. 设置宫格导航菜单路由以及传参(以导航1和导航2设置为例),点击每一个菜单会传递不同的参数到侧边选项卡目标页面。

3. 侧边选项卡页面接收参数,侧边选项卡选中标签绑定默认入参。

4. 打开侧边选项卡内容插槽开关,切换侧边选项可以展示不同的组件内容。

5. 返回宫格导航页面,点击菜单导航4,侧边选项卡页面效果展示。

场景二:从其他页面返回侧边选项页面保持之前选择状态

1. 在侧边选择卡页面设置点击事件,配置如下。

2. 侧边选项卡页面新建全局变量、添加执行事件。

3. 目标页面以表单容器为例,表单场景选择更新,并绑定数据标识(为上一页面传递过来的参数_id)。

4. 目标页面表单提交事件新增返回上一页事件。

5. 效果展示,在侧边选项卡页面点击前往目标页面。

6. 目标页面执行表单更新事件成功后,自动返回上一页,可以看的侧边选项卡默认选中之前的选项“导航2”。



最后一次编辑于  06-26  
点赞 0
收藏
评论
登录 后发表内容