轮播图

配置

• 搜索配置：单击配置面板右上角的搜索配置，可在搜索配置弹出框中输入您需要搜索的配置项名称，快速定位到该配置项，系统支持模糊匹配。详情请参见搜索组件配置。
• 图表尺寸：包括组件的宽度和高度，单位为px。可单击锁定组件的宽高比，等比例修改组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。
• 图表位置：包括组件的横坐标和纵坐标，单位为px。横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
• 旋转角度：以组件的中心为中心点，进行旋转，单位为度（°）。
  • 手动输入角度值，控制组件的旋转角度。
  • 拖动图标内的黑点，控制组件的旋转角度。
  • 单击图标，控制组件左右翻转样式。
  • 单击图标，控制组件上下翻转样式。
• 透明度：取值范围为[0,1]。为0时，图表隐藏；为1时，图表全部显示。默认为1。
• 全局样式
  
  
  • 字体：组件中所有文本的字体。请选择已安装于本机中的字体，否则以默认字体显示。
  • 字号：组件中所有文本的字体大小，取值范围为10到100。
• 动画
  
  
  • 停顿：图片停留展示的时间，单位为ms。
  • 速度：图片轮播时动画效果持续时间，单位为ms。
  • 特效：动画播放的效果，可选：水平滚动、垂直滚动、淡入淡出、马赛克。
• 图片
  
  
  • 默认图片：轮播图默认显示的图片，将本地图片拖动到虚线框内或者输入图片的url地址。可单击虚线框内删除图标删除当前图片。
  • 填充方式：图片的填充方式，可选：拉伸以充满容器、充满容器、居中。
• 描述：轮播图中每张图片的描述样式，可单击眼睛图标控制描述的显隐。
  
  
  • 背景颜色：描述模块的背景颜色。
    • 颜色样式：背景颜色的样式，可选：渐变、单色。
    • 开始颜色：背景的开始颜色，可参考颜色选择器说明进行修改，仅当颜色样式为渐变时有效。
    • 结束颜色：背景的结束颜色，仅当颜色样式为渐变时有效。
    • 角度：开始到结束两个颜色渐变的方向，仅当颜色样式为渐变时有效。
  • 文字颜色：描述文本的颜色。
  • 字体粗细：描述文本的字体粗细。
  • 长度：描述栏占组件长度的百分比，单位为%。
  • 高度：描述栏占组件宽度的百分比，单位为%。
  • 上边距：描述栏距离组件上边界的距离，单位为px。
  • 下边距：描述栏距离组件下边界的距离，单位为px。
  • 对齐方式：描述文本的对齐方式，可选：向左、居中、向右。
• 圆点：轮播图底部的圆点样式，可单击眼睛图标控制圆点的显隐。
  
  
  • 圆点颜色：未选中图片的圆点颜色。
  • 当前颜色：当前页面的圆点颜色。

数据

上图中的示例数据如下：

[
  {
    "description": "这是第一张图片的描述",
    "url": "//img.alicdn.com/tps/TB1PH6EPXXXXXXbaFXXXXXXXXXX-4001-2251.png"
  },
  {
    "description": "这是第二张图片的描述",
    "url": "//img.alicdn.com/tps/TB10kzBPXXXXXXaaFXXXXXXXXXX-4001-2251.png"
  },
  {
    "description": "这是第三张图片的描述",
    "url": ""
  }
]

• url：轮播图片的url，与图片 > 默认图片配置项功能相同。如果同时配置，则以url中的内容为准。
  说明 此处的图片需要进行跨域配置。若不指定访问协议（如：//img.alicdn.com/tps/TB1PH6EPXXXXXXbaFXXXXXXXXXX-4001-2251.png），DataV会按照大屏访问协议去请求图片。
• description：（可选）图片的描述内容。

交互

此组件没有交互事件。