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

前提条件

准备好交互需求。

本案例的交互需求为:使用Tab列表控制区域图的显隐。

背景信息

本文档为您提供以下两种解决方案。
  • 通过触发器设置触发条件控制组件的显示和隐藏,详情请参见下文的通过触发器控制
  • 通过转换器结合组内轮播功能控制组件的显示和隐藏,详情请参见下文的通过转换器控制

通过触发器控制

  1. 参考添加组件,在可视化大屏编辑器页面搭建所需要的Tab列表和两个区域图组件。
    添加组件
  2. 单击大屏编辑页面右上角的配置节点编程图标。
    配置节点编程图标
  3. 节点编程配置页面,将左侧的Tab列表和两个区域图节点拖至画布中,并按照如下图所示的样式进行连线。
    连线
  4. 添加触发器。
    连线中需要添加两个触发器,分别命名为id=1id=2,如上图所示。具体操作方法请参见配置节点编程
  5. 配置触发器。
    1. 右键单击名称为id=1的触发器,选择编辑
    2. 触发器设置对话框的触发器脚本编辑区域,输入触发条件return data.id == 1;,单击保存
      编辑触发器脚本1
    3. 使用同样的方式配置名称为id=2的触发器,输入触发条件return data.id == 2;
      编辑触发器脚本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组件控制区域图组组内翻页,实现组件显隐的交互效果。
    组件显隐的交互效果