轮播列表是文字组件的一种,支持各行各列的样式和内容的自定义配置,支持列表内容的超链接配置,同时支持图片格式的列表内容,能够使用轮播动画的方式,将数据信息以列表的形式清晰地展示在大屏上。本文档为您介绍轮播列表各配置项的含义,帮助您快速准确地使用轮播列表组件。

配置

  • 搜索配置:单击配置面板右上角的搜索配置,可在搜索配置弹出框中输入您需要搜索的配置项名称,快速定位到该配置项,系统支持模糊匹配。详情请参见搜索组件配置
  • 图表尺寸:包括组件的宽度和高度,单位为px。可单击锁定长宽比按键锁定组件的宽高比,等比例修改组件的宽高。再次单击进行解锁,解锁后宽高比不受限制。
  • 图表位置:包括组件的横坐标纵坐标,单位为px。横坐标为组件左上角距离页面左边界的像素距离,纵坐标为组件左上角距离页面上边界的像素距离。
  • 旋转角度:以组件的中心为中心点,进行旋转,单位为度(°)。
    • 手动输入角度值,控制组件的旋转角度。
    • 拖动圆圈旋转控制图标图标内的黑点,控制组件的旋转角度。
    • 单击左右翻转图标图标,控制组件左右翻转样式。
    • 单击上下翻转图标图标,控制组件上下翻转样式。
  • 透明度:取值范围为[0,1]。为0时,图表隐藏;为1时,图表全部显示。默认为1
  • 全局
    轮播列表全局配置
    • 表格行数:轮播列表的表格行数。
    • 轮播:开启后,在预览或发布页面列表内容可自动轮播。关闭后,动画样式无法配置。
    • 字体:组件中所有文本的字体,默认为微软雅黑
  • 动画:仅当开启了轮播配置项才生效。
    • 动画模式:轮播动画的模式,可选:全部滚动、逐条滚动。
    • 轮播间隔:轮播间隔的时间,单位为秒。
    • 单页不轮播:开启后,若数据条数达不到表格行数(数据只有一页)时,不进行轮播。
  • 空值隐藏行:开启后,数据内容为空的情况下,自动隐藏该行不显示。
  • 溢出文本滚动
    • 滚动:开启后,在预览或发布页面溢出文本可自动滚动。
    • 滚动时间:溢出文本的滚动时间,单位为秒。
  • 表头:列表的表头样式,可单击眼睛图标控制显隐。
    轮播列表表头配置
    • 表头行高:表头部分占整个图表高度的比例值,取值范围为0到100,单位为%。
    • 背景颜色:表头部分的背景颜色,可参考颜色选择器说明进行修改。
    • 文本样式:表头中文本的样式。
      • 文本对齐:文本对齐的方式,可选:左对齐、居中对齐、右对齐。
      • 字体:文本的字体系列,默认为微软雅黑
      • 字体颜色:文本的颜色。
      • 字号:文本的大小,取值范围为0到200。
      • 字体粗细:文本字体的粗细样式。
  • 行配置
    轮播列表行配置
    • 奇行背景色:列表中奇数行的背景颜色。
    • 偶行背景色:列表中偶数行的背景颜色。
    • 回调字段:作为回调参数的字段,需要取数据中的某个字段。
  • 序列号:列表中序列号的样式,可单击眼睛图标控制显隐。
    轮播列表序列号配置
    • 背景颜色:序列号的背景颜色。
    • 列宽占比:序列号所在列的宽度,取值为占列表宽度的百分比,取值范围为0到100,单位为%。
    • 半径占比:序列号的半径,取值为占序列号所在列的宽度的百分比,取值范围为0到100,单位为%。
    • 文本样式
      • 字体颜色:序列号文本的颜色。
      • 字号:序列号文本的大小,取值范围为0到50。
      • 字体粗细:序列号文本的字体粗细。
  • 自定义列:单击+添加新的标签列,单击垃圾桶图标删除当前标签列。
    轮播列表自定义列配置
    说明 该配置项为一个数组,可配置多个自定义列,编辑器会遍历数据,使数据通过一个或多个自定义列配置循环渲染。若需要自定义某些数据为特定样式,则需要手动对数据进行排序。
    • 列字段名:自定义列所对应的字段名,需要与数据中的字段相对应。
    • 列显示名:自定义列所对应的显示名,作为表头的内容显示。
    • 列宽占比:自定义列占列表宽度的百分比,取值范围为0到100,单位为%。
    • 内容类型:自定义列的内容类型,可选:文本、图片。
    • 自动换行:勾选后,自定义列的内容可自动换行。
    • 文本样式
      • 文本对齐:自定义列的文本对齐方式,可选:左对齐、居中对齐、右对齐。
      • 字号:自定义列的文本大小,取值范围为0到200。
      • 字体颜色:自定义列的文本颜色。
      • 字体粗细:自定义列文本的字体粗细。

数据


轮播列表数据面板

上图中的示例数据如下:

[
  {
    "area": "<a href=\"http://www.gov.cn/\">中国</a>",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "美国",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "俄罗斯",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "德国",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "吉尔吉斯斯坦",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "英国",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "日本",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "南非",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "巴西",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "印度",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "新加坡",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "加拿大",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "澳大利亚",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "阿根廷",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  },
  {
    "area": "西班牙",
    "pv": 688,
    "attribute": "xxxxxxxxxxxxxxxxxxx"
  }
]

字段任意配置,需要与自定义列 > 列字段名配置项中的字段相对应。若要实现超链接可把字段内容设置为a标签。

表 1. 配置项说明
配置项 说明
自动更新请求 勾选后可以设置动态轮询,还可以手动输入轮询的时间频次。
数据源 单击配置数据源,可在设置数据源页面中修改数据源类型和数据查询代码、预览数据源返回结果以及查看数据响应结果。详情请参见配置组件数据
数据过滤器 单击添加过滤器,可在设置数据源页面中配置数据过滤器,详情请参见组件过滤器使用说明
数据响应结果 展示数据请求的响应结果。当数据源发生改变时,可单击右侧的刷新图标,实时查看数据响应结果。

交互

  • 单行点击响应事件:勾选启用,开启组件交互功能。可单击轮播列表中的某一行抛出回调值,默认抛出数据中的所有自定义列字段。具体配置请参考组件回调ID配置
  • 数据翻动响应事件:勾选启用,开启组件交互功能。当列表中的数据进行翻动时,会抛出回调值,默认抛出index(序号)字段。具体配置请参考组件回调ID配置