如何使用Tab列表控制组件显隐

理解案例交互

通过分支判断节点控制

1. 参考画布编辑器添加组件，在画布编辑器页面搭建所需要的Tab列表、区域图和基本柱状图组件。
2. 单击画布编辑器图层栏内三个组件，右键单击选择导出到蓝图编辑器。
   
3. 在画布编辑器页面左上角，单击蓝图编辑器图标（），切换到蓝图编辑器配置页面。
4. 在蓝图编辑器配置页面，将左侧导入节点栏内的Tab列表、区域图和基本柱状图节点拖至画布中。从逻辑节点栏内拖动添加两个分支判断节点到画布中，并按照如下图所示的样式进行连线。
   
5. 配置画布中两个分支判断内的处理方法，将处理方法分别重命名为判断是否为tab1和判断是否为tab2。
   1. 单击与区域图关联的分支判断逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的判断是否为tab1处理方法，单击右侧箭头打开脚本编辑区域。
   2. 在脚本编辑区域，输入代码，完成后单击完成。
      当前处理方法的示例代码如下。

      return data.id == 1;

   3. 使用同样的方式配置判断是否为tab2处理方法。
      当前处理方法的示例代码如下。

      return data.id == 2;

      说明 该触发判断条件下，实现的交互是如果Tab列表的参数id=1的情况下，参数传递给两个分支判断节点后会使得与区域图组件关联的处理方法为true（满足）状态，与基本柱状图组件关联的处理方法为false（不满足）状态，配置为true的时候才会触发区域图执行显示和基本柱状图执行隐藏的相应动作。
6. 处理方法都配置完成后，单击预览即可查看Tab组件控制区域图和基本柱状图组件显隐的交互效果。
   

通过串行数据处理节点控制

1. 参考添加组件，在可视化画布编辑器页面搭建所需要的Tab列表、区域图和基本柱状图组件。
2. 将区域图和基本柱状图重叠放置，并全部选中，右键单击成组。
3. 单击成组的对象，在右侧的配置栏中，打开组内对象轮播开关，并将基础设置中的触发方式设置为事件触发。
4. 单击画布编辑器图层栏内Tab列表组件和组，右键选择导出到蓝图编辑器。
5. 单击画布编辑器页面左上角，单击蓝图编辑器图标（），切换到蓝图编辑器配置页面。
6. 在蓝图编辑器配置页面，将左侧导入节点栏内的Tab列表和组节点拖至画布上，并按照如下图所示的样式连线。
   
7. 连线中间会自动添加一个串行数据处理节点。
8. 配置画布中串行数据处理节点内的处理方法。
   1. 单击与串行数据处理逻辑节点，进入右侧配置面板，选择面板内其他配置栏下方的处理方法，单击右侧箭头打开脚本编辑区域。
   2. 在脚本编辑区域，输入代码，完成后单击完成。
      当前处理方法的示例代码如下。

      return {  
        index: data.id - 1 
      };

      
      说明 该触发判断条件下，实现的交互是当Tab列表组件当Tab点击时事件内的{id:"1"} 参数传递给串行数据处理节点后变成{index:0} 并传递给组作为query参数并立即执行相应动作。组内的组件索引是以0开始的，所以要在串行数据处理时进行相应加工。
9. 处理方法都配置完成后，单击预览即可查看Tab组件控制组的组内翻页，实现组件显隐的交互效果。