本文档以Tab列表动态控制数字翻牌器组件样式更新为例,为您介绍节点编程动态控制组件样式的方法。

前提条件

准备好您的交互需求。

本案例的交互需求为:使用Tab列表动态控制数字翻牌器数值的颜色。

背景信息

本案例的场景为:数字翻牌器在项目中经常使用动态数据源,用户需求为根据数据源返回值的大小,使用不同的颜色展示该数值。

本案例实现的功能:使用Tab列表组件模拟实际场景的动态数据源(如API、数据库等),根据数字翻牌器接收到的value值大小,切换展示不同的数据样式。

操作步骤

  1. 参考添加组件,在可视化大屏编辑器页面搭建所需要的Tab列表数字翻牌器组件。
    添加组件
  2. 在大屏编辑器内,配置Tab列表组件右侧配置面板中的行数列数等配置项。
    配置栏样式配置
  3. 修改数字翻牌器配置面板中的标题配置项。
    修改标题样式
  4. 样式配置完成后,单击大屏编辑页面右上角的配置节点编程图标。
    配置节点编程图标
  5. 节点编程配置页面,将左侧的Tab列表数字翻牌器节点拖至画布中,并按照如下图所示的样式进行连线。
    节点编程连线样式
    您需要进行两次连线,如上图所示。
    • Tab列表当Tab点击时事件与数字翻牌器导入数据接口动作连线。
    • 数字翻牌器当数据接口请求完成时事件与数字翻牌器更新组件配置动作连线。
  6. 添加转换器。
    连线中需要添加两个转换器,分别命名为更新翻牌器Value配置数字颜色,如上图所示。具体操作方法请参见配置节点编程
  7. 配置更新翻牌器Value转换器。
    1. 右键单击更新翻牌器Value转换器,选择编辑
    2. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,完成后单击保存
      翻牌器转换条件
      当前转换器代码如下。
      return [{
          value: data.id == 1 ? 30 : 50
      }];
  8. 配置配置数字颜色转换器。
    1. 单击左上角的返回编辑器图标,返回大屏编辑器页面。单击数字翻牌器组件,在右侧的配置面板中,单击下方的复制配置到剪贴板
      复制配置到剪贴板
    2. 将复制的内容粘贴到任意的代码编辑器中,观察数据层级关系,并找到您需要更新的组件配置字段。
      观察确认层级关系
    3. 根据上图的数据结构,编写要传入数字翻牌器的样式配置脚本。
      {
          "counter": {
            "numbers":{
              "textStyle":{
                "color":"#18F8B8"//将要修改的数据颜色
              }
            }
          }
        }
    4. 进入节点编程配置界面,右键单击配置数字颜色转换器,选择编辑
    5. 转换器设置对话框的转换器脚本编辑区域,输入转换条件,输入完成后单击保存
      编辑数字颜色转换器条件
      当前转换器的代码如下。
      return data[0].value - 40 >= 0 ? {
        "counter": {
          "numbers": {
            "textStyle": {
              "color": "#18F8B8"
            }
          }
        }
      } : {
          "counter": {
            "numbers": {
              "textStyle": {
                "color": "#00C0FF"
              }
            }
          }
        }
  9. 当前两个转换器都配置完成后,单击节点编程配置页面右上角的应用图标,将交互效果应用到大屏项目中。
  10. 返回大屏编辑器页面,单击预览,查看Tab列表动态控制数字翻牌器组件样式的交互效果。
    动态控制组件显示