更新时间:2024-07-11 GMT+08:00
分享

轮播

轮播是媒体组件的一种,是多图片轮播组件,可实现多图片的切换和对应事件。

在高级页面设计器中,单击,从“媒体 > 通用”中,拖拽“轮播”组件到画布中,如图1所示。

图1 轮播

属性

在属性中,设置轮播组件的位置、边框、连接器等。

图2 属性
  • 基础
    • 组件标题:设置组件的标题。
    • 组件名称:设置组件的名称。
  • 位置
    • 距离左端:组件到页面左侧的距离,单位为px。
    • 距离顶端:组件到页面顶部的距离,单位为px。
    • 宽度:组件的宽度,单位为px。
    • 高度:组件的高度,单位为px。
    • 堆叠顺序:设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”,数字越大,显示越靠前。当需要让组件置底时,可设置堆叠顺序为“0”。
    • 自适应高度:组件的高度是否随宽度改变。
  • 边框:设置组件的边框样式,如全边框或角边框。
  • 背景
    • 样式:设置背景的样式,如普通、居中、拉伸等。
    • 图片链接:背景图片URL。
    • 颜色:设置背景的颜色。
  • 自定义属性列表:显示组件的自定义属性。
  • 图片源设置:图片来源是否取自OBS连接器。
    • 勾选使用连接器,表示取自OBS连接器。当连接器中图片过多时,可能会导致读取图片缓慢,且打包该页面时,由于图片地址为绝对地址,打包安装后,图片地址不可用,需要重新上传图片并进行配置。
    • 不勾选使用连接器,表示图片来源取自平台接口。选择图片后实际存储的是图片id,页面随应用打包时会将图片一起打包,在新环境安装后无需重新上传配置。
  • 连接器设置
    • 选择连接器:选择有存储功能的OBS类型连接器。OBS连接器配置完成后,才可以进行图片的查询、上传等操作,连接器的配置方法请参见对接OBS云对象存储实例
    • 选择桶:连接器的存储桶。

高级设置

在高级设置中,可设置轮播时长、切换方式等。

图3 高级设置
  • 轮播设置
    • 切换方向:广告图片的轮播切换样式,支持横向滚动切换、右下角滚动切换和纵向滚动切换。
    • 加载自动播放:是否自动轮播。开启后,支持设置图片轮播时间间隔(不大于24秒)。
    • 切换方式:设置图片切换时,展示的样式,如淡出、推出等。
    • 定位标志:设置分页图标样式。
  • 图片管理:对图片进行管理,并支持为图片配置跳转链接。
    • 单击“添加”,在“选择图片/视频”页面,单击目录后的,可管理图片目录。单击“上传图片/视频”,可上传图片。
    • 选中图片,单击,可删除图片。
    • 单击,可编辑图片跳转链接。

数据

在数据中,设置组件的数据来源。更多介绍,请参见如何调用后台接口

图4 设置组件数据

事件

在事件中,可查看组件可配置的事件列表。更多关于事件的介绍,请参见初识事件-动作

图5 设置事件

相关文档