跳到主要内容

自定义Tab组件默认打开页签

本文档介绍如何通过URL参数控制Tab组件默认激活的页签。

业务场景​

Tab 组件提供了多页签的布局，支持以下两种默认页签行为：

  1. 自动记忆：用户在某个页面打开某个Tab页签，当用户再次进入该页面时，会自动导航到上次访问过的页签
  2. URL控制：在页面跳转时，通过URL参数直接指定要打开的页签

适用场景​

  • 从列表页跳转到详情页的特定Tab页签
  • 外部链接直接打开某个特定页签
  • 流程引导用户查看特定内容
  • 多入口访问同一页面的不同内容

配置方法​

URL参数说明​

使用 activeCmps 参数控制页面加载时默认激活的组件：

https://host/xxx?activeCmps=65d614bc-0f2a-4ed1-9493-9e164bd892dd

参数说明：

参数类型说明
activeCmpsstring页面加载时默认激活的组件ID，多个组件ID用英文逗号分隔

获取组件ID​

要使用 activeCmps 参数，需要先获取Tab页签对应的组件ID：

  1. 进入页面设计器
  2. 选中Tab组件中的某个页签
  3. 在右侧属性面板中查看组件ID
  4. 复制组件ID用于URL参数

使用示例​

示例1：打开单个Tab页签​

假设有一个用户详情页面，包含"基本信息"、"订单记录"、"操作日志"三个Tab页签，组件ID分别为：

  • 基本信息：65d614bc-0f2a-4ed1-9493-9e164bd892dd
  • 订单记录：72e825cd-1a3b-5fe2-85a4-0f275ce903ee
  • 操作日志：83f936de-2b4c-6gf3-96b5-1a386df014ff

直接打开"订单记录"页签：

https://example.com/user-detail?activeCmps=72e825cd-1a3b-5fe2-85a4-0f275ce903ee

示例2：打开多个Tab页签​

如果页面中有多个Tab组件，可以同时指定多个组件ID：

https://example.com/dashboard?activeCmps=comp-id-1,comp-id-2,comp-id-3

示例3：从列表跳转到详情页特定Tab​

在列表页的行按钮中配置跳转链接：

// 在行按钮的自定义动作中
const userId = row._id;
const tabId = "72e825cd-1a3b-5fe2-85a4-0f275ce903ee"; // 订单记录Tab ID
window.location.href = `/user-detail?id=${userId}&activeCmps=${tabId}`;

示例4：动态生成跳转链接​

在脚本中动态生成带有Tab参数的URL：

public object Execute(ComponentContext context, ChameleonSDK sdk)
{
    var list = context.Request.List;
    var first = list.FirstOrDefault();
    
    if (first == null)
        return null;
    
    var userId = first._id;
    var tabId = "72e825cd-1a3b-5fe2-85a4-0f275ce903ee";
    
    // 设置跳转URL
    context.DicParam["RedirectUrl"] = $"/user-detail?id={userId}&activeCmps={tabId}";
    
    return null;
}

工作原理​

优先级规则​

Tab 组件的默认页签选择遵循以下优先级：

  1. URL参数优先：如果URL中包含 activeCmps 参数，优先使用URL指定的页签
  2. 用户记忆次之：如果URL中没有参数，使用用户上次访问的页签
  3. 默认页签最后：如果以上都没有，使用Tab组件配置的默认页签

参数解析​

系统在页面加载时会：

  1. 解析URL中的 activeCmps 参数
  2. 查找对应的组件
  3. 激活指定的Tab页签
  4. 滚动到组件可见区域

注意事项​

  1. 组件ID准确性：确保URL参数中的组件ID正确且存在
  2. 多个组件：多个组件ID用英文逗号分隔，不要有空格
  3. URL编码：如果组件ID包含特殊字符，需要进行URL编码
  4. 页面刷新：页面刷新后，如果URL参数仍然存在，会继续使用URL指定的页签
  5. 用户记忆：使用URL参数不会覆盖用户的页签记忆，下次不带参数访问时仍会使用记忆的页签

常见问题​

Q: 如何获取Tab页签的组件ID？​

A: 在页面设计器中选中Tab页签，在右侧属性面板中可以查看和复制组件ID。

Q: 可以同时激活多个Tab组件的页签吗？​

A: 可以，在 activeCmps 参数中用逗号分隔多个组件ID即可。

Q: URL参数会覆盖用户的页签记忆吗？​

A: 不会。URL参数只在当前访问时生效，不会修改用户的页签记忆。下次不带参数访问时，仍会使用用户上次访问的页签。

Q: 如果指定的组件ID不存在会怎样？​

A: 系统会忽略不存在的组件ID，使用用户记忆或默认页签。

Q: 可以在其他组件上使用 activeCmps 参数吗？​

A: activeCmps 参数主要用于Tab组件，但也可以用于其他需要激活状态的组件。

相关文档​