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

前提条件

准备好您的交互需求。

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

背景信息

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

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

理解案例交互

当前案例实现需要用户将交互转成节点和边的关联关系,需要使用的组件有满足需求的事件和动作才能进行配置,否则就无法实现。
  • 组件:组件包含两种能力,事件抛出能力和动作执行能力。本案例使用了翻牌器组件之间的联动。
    • Tab列表:具备抛出请求接口返回数据的能力。
    • 数字翻牌器:属于被联动组件,具有接收数据并执行动作的能力。
  • 蓝图编辑器:通过运用逻辑节点编排的方式,将上游组件的交互/事件下游组件的执行动作绑定,从而实现页面内组件间的交互联动。
    说明 蓝图编辑器配置完成后需要在预览页查看配置效果。

配置案例交互

  1. 参考画布编辑器添加组件,在可视化大屏编辑器页面搭建所需要的Tab列表数字翻牌器组件。添加组件
  2. 在画布编辑器内,配置Tab列表组件右侧配置面板中的行数列数等配置项。配置栏样式配置
  3. 修改数字翻牌器配置面板中的标题配置项。修改标题样式
  4. 样式配置完成后,单击画布编辑器图层栏内数字翻牌器Tab列表组件,右键选择导出到蓝图编辑器tab和数字翻牌器导出蓝图编辑器
  5. 单击画布编辑器页面左上角,单击蓝图编辑器图标,切换到蓝图编辑器配置页面。蓝图编辑器界面入口
  6. 蓝图编辑器配置页面,将左侧导入节点栏内的Tab列表数字翻牌器节点拖至画布中,并按照如下图所示的样式进行连线。节点编程连线样式
    您需要进行两次连线,如上图所示。
    • Tab列表当Tab点击时事件与数字翻牌器导入数据接口动作连线。
    • 数字翻牌器当数据接口请求完成时事件与数字翻牌器更新组件配置动作连线。
  7. 连线完成后会自动添加两个串行数据处理逻辑节点到连线中,分别将两个串行数据处理节点配置面板中的处理方法重命名为更新翻牌器value配置数字颜色,如上图所示。
    具体操作方法请参见串行数据处理
  8. 配置画布中更新翻牌器value处理方法。
    1. 单击与Tab列表关联的串行数据处理逻辑节点,进入右侧配置面板,选择面板内其他配置栏下方的更新翻牌器value处理方法,单击右侧下拉框打开脚本编辑区域。
    2. 在脚本编辑区域,输入代码,完成后单击完成
      当前处理方法的示例代码如下,用于模拟动态数据更新翻牌器的value值。 翻牌器转换条件
      return [{
          value: data.id == 1 ? 30 : 50
      }];
      说明 在配置Tab列表点击事件动态改变数字翻牌器数据这步骤时,如果遇到实际场景数字翻牌器已配置动态数据源的情况,可跳过这一步。
  9. 配置画布中配置数字颜色处理方法。
    1. 单击蓝图编辑器左上角的画布编辑器图标,切换返回画布编辑器页面。单击数字翻牌器组件,在右侧的配置面板中,单击下方的复制配置到剪贴板复制配置到剪贴板
    2. 将复制的内容粘贴到任意的代码编辑器中,观察数据层级关系,并找到您需要更新的组件配置字段。观察确认层级关系
    3. 根据上图的数据结构,编写要传入数字翻牌器的样式配置脚本。
      {
          "counter": {
            "numbers":{
              "textStyle":{
                "color":"#18F8B8"//将要修改的数据颜色
              }
            }
          }
        }
    4. 切换回蓝图编辑器界面,单击另一个串行数据处理逻辑节点,进入右侧配置面板,选择面板内其他配置栏下方的配置数字颜色处理方法,单击右侧下拉框打开脚本编辑区域。
    5. 在脚本编辑区域,输入代码,完成后单击完成
      当前处理方法的示例代码如下,用于在数据接口请求完成时根据value值大小配置数字颜色样式。配置数据颜色处理方法代码
      return data[0].value - 40 >= 0 ? {
        "counter": {
          "numbers": {
            "textStyle": {
              "color": "#18F8B8"//将要修改的数据颜色
            }
          }
        }
      } : {
          "counter": {
            "numbers": {
              "textStyle": {
                "color": "#00C0FF"
              }
            }
          }
        }
  10. 当前两个处理方法都配置完成后,单击蓝图编辑器配置页面右上角的预览图标,查看Tab列表动态控制数字翻牌器组件样式的交互效果。动态控制组件显示