标志墙是素材组件的一种,支持自定义标志的背景颜色、动画效果、显示图标等,能够以标志墙的形式在大屏中展示多种标志图标。本文档为您介绍标志墙各配置项的含义,帮助您快速准确地使用标志墙组件。

样式

  • 基础属性
    • 图表尺寸:组件的宽度和高度,单位为px。
    • 图表位置:组件在大屏中的位置,通过横纵坐标来定义,单位为px。
    • 其他:组件的旋转角度和透明度。
  • 全局

    • 圆角半径:各标志的圆角半径。
    • 边框粗细:各标志的边框粗细。
    • 边框颜色:各标志的边框颜色,可参考颜色选择器说明进行修改。
    • 填充方式:标志的填充方式。共包含三种方式,分别为默认铺满拉伸以填充容器
    • 行数:背景墙的行数。
    • 列数:背景墙的列数。
    • 标签列间距:各标志之间的列间距。
    • 标签行间距:各标志的之间的行间距。
  • 动画:当标志墙有多个页面时,此配置项可以设置这些页面轮播。
    • 自动轮播:勾选后,多个标志墙页面会自动进行轮播。
    • 停顿:各轮播页面的停留时间,单位为s。
  • 圆点:轮播页面下侧的圆点样式,可单击眼睛图标控制显隐。

    • 圆点颜色:所有圆点的颜色。
    • 当前颜色:当前页面圆点的颜色。
    • 圆点大小:圆点的大小。
    • 圆点间距:各圆点的间距。
    • 竖向偏移值:圆点与页面之间的距离,负数为向下移动,正数反之。

  • 背景颜色:各标志格的背景颜色,单击右侧的+号或垃圾桶图标,添加或删除一个背景色。
    说明 当您添加了多个背景色时,DataV会为您平均分配各标志的颜色。

数据



上图中的示例数据如下:
[
  {
    "value": "https://img.alicdn.com/tfs/TB1AA0IhbGYBuNjy0FoXXciBFXa-99-65.png"
  },
  {
    "value": "https://img.alicdn.com/tfs/TB14_p8hkyWBuNjy0FpXXassXXa-99-65.png"
  },
  {
    "value": "https://img.alicdn.com/tfs/TB1Bk0IhbGYBuNjy0FoXXciBFXa-99-65.png"
  },
  {
    "value": "https://img.alicdn.com/tfs/TB1AA0IhbGYBuNjy0FoXXciBFXa-99-65.png"
  },
  {
    "value": "https://img.alicdn.com/tfs/TB14_p8hkyWBuNjy0FpXXassXXa-99-65.png"
  },
  {
    "value": "https://img.alicdn.com/tfs/TB1Bk0IhbGYBuNjy0FoXXciBFXa-99-65.png"
  }
]
  • value:各标志格图标的URL地址,需要支持跨域。建议声明http或者https协议。
    注意 如果您使用 https 协议访问大屏,而标志的 url 使用了 http 协议,那么 DataV 将无法访问标志的 url,大屏上不会显示对应的图标。

交互

此组件没有交互事件。