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

本文档以Tab列表控制区域图的显隐为例，为您介绍使用DataV节点编程功能控制组件显隐的方法。

背景信息

本文档为您提供以下两种解决方案。

• 通过触发器设置触发条件控制组件的显示和隐藏，详情请参见下文的通过触发器控制。
• 通过转换器结合组内轮播功能控制组件的显示和隐藏，详情请参见下文的通过转换器控制。

通过触发器控制

1. 参考添加组件，在可视化大屏编辑器页面搭建所需要的Tab列表和两个区域图组件。
   
   
2. 单击大屏编辑页面右上角的配置节点编程图标。
   
   
3. 在节点编程配置页面，将左侧的Tab列表和两个区域图节点拖至画布中，并按照如下图所示的样式进行连线。
   
   
4. 添加触发器。
   连线中需要添加两个触发器，分别命名为id=1和id=2，如上图所示。具体操作方法请参见配置节点编程。
5. 配置触发器。
   1. 右键单击名称为id=1的触发器，选择编辑。
   2. 在触发器设置对话框的触发器脚本编辑区域，输入触发条件return data.id == 1;，单击保存。
      
      
   3. 使用同样的方式配置名称为id=2的触发器，输入触发条件return data.id == 2;。
      
      
      说明 该触发条件下，实现的交互是Tab列表的参数id=1的情况下，一号区域图显示，二号区域图隐藏。
6. 触发器配置完成后，单击节点编程配置页面右上角的应用图标，将交互效果应用到大屏项目中。
7. 返回DataV编辑器页面，单击预览即可查看Tab组件控制区域图组件显隐的交互效果。
   
   

通过转换器控制

1. 在大屏项目的编辑器页面，搭建所需要的Tab列表和两个区域图组件。
2. 将两个区域图重叠放置，并全部选中，右键单击成组。
   
   
3. 单击成组的对象，在右侧的配置栏中，打开组内对象轮播开关，并将基础设置中的触发方式设置为事件触发。
   
   
4. 单击大屏编辑页面右上角的配置节点编程图标。
5. 在节点编程配置页面，将左侧的Tab列表和区域图组节点拖至画布上，并按照如下图所示的样式连线。
   
   
6. 在连线中间添加一个转换器，并命名为翻页。
7. 配置转换器。
   1. 右键单击转换器，选择编辑。
   2. 在转换器设置对话框的转换器脚本编辑区域，输入如下脚本，单击保存。
      
      

      return {  
        index: data.id - 1 
      };

8. 转换器配置完成后，单击节点编程配置页面右上角的应用图标，将交互效果应用到大屏项目中。
9. 返回DataV编辑器页面，单击预览即可查看Tab组件控制区域图组组内翻页，实现组件显隐的交互效果。