如何使用Tab列表控制组件显隐
本文档以Tab列表控制区域图和基础柱图的显隐为例，为您介绍使用 Uniplore 蓝图编辑器功能控制组件显隐的方法。
前提条件
准备好交互需求。 本案例的交互需求为：使用Tab列表控制区域图和基础柱图的显隐。
背景信息
本文档为您提供以下两种解决方案。
- 通过分支判断节点设置触发条件控制组件的显示和隐藏，详情请参见下文的 通过分支判断节点控制。
- 通过串行数据处理节点结合组内轮播功能控制组件的显示和隐藏，详情请参见下文的 通过串行数据处理节点控制。
理解案例交互
当前案例实现需要您将交互转成节点和连线的关联关系，需要使用的组件有满足需求的事件和动作才能进行连线配置，否则就无法实现。
- 组件：组件包含两种能 力，事件抛出能力和动作执行能力。本案例使用了翻牌器组件之间的联动。
- Tab列表：具备抛出请求接口返回数据的能力。
- 区域图&基础柱图：属于被联动组件，具有接收数据并执行动作的能力。
- 蓝图编辑器：通过运用逻辑节点编排的方式，将上游组件的交互/事件与下游组件的执行动作绑定，从而实现页面内组件间的交互联动。
信息
**说明 **蓝图编辑器配置完成后需要在预览页查看配置效果。
通过分支判断节点控制
- 参考画布编辑器 添加组件 ，在画布编辑器页面搭建所需要的Tab列表、区域图和基础柱图组件。
- 单击画布编辑器图层栏内三个组件，右键单击选择导出到蓝图编辑器。
- 在画布编辑器页面左上角，单击蓝图编辑器图标，切换到蓝图编辑器配置页面。
- 在蓝图编辑器配置页面，将左侧导入节点栏内的Tab列表、区域图和基本柱状图节点拖至画布中。从逻辑节点栏内拖动添加两个分支判断节点到画布中，并按照如下图所示的样式进行连线。
- 配置画布中两个分支判断内的处理方法，将处理方法分别重命名为判断是否为tab1和判断是否为tab2。
- 单击与区域图关联的分支判断逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的判断是否为tab1处理方法，单击右侧箭头打开脚本编辑区域。
- 在脚本编辑区域，输入代码，完成后单击完成。当前处理方法的示例代码如下。
return data.id == 1;
- 使用同样的方式配置判断是否为tab2处理方法。当前处理方法的示例代码如下。
return data.id == 2;
信息
说明 该触发判断条件下，实现的交互是如果 Tab列表的参数 id=1的情况下，参数传递给两个 分支判断节点后会使得与 区域图组件关联的处理方法为true（满足）状态，与 基本柱状图组件关联的处理方法为false（不满足）状态，配置为true的时候才会触发 区域图执行 显示和 基本柱状图执行 隐藏的相应动作。
- 处理方法都配置完成后，单击预览即可查看Tab组件控制区域图和基本柱状图组件显隐的交互效果。
