跳到主要内容

轮播图

用于循环播放一组图片或内容卡片，适用于首页横幅、广告推荐、内容预览等场景。

一、何时使用​

  • 首页顶部轮播广告图
  • 商品浏览页的推荐内容滑动卡片
  • 用户动态、推荐视频的轮播展示
  • 横向滑动展示多个内容项

二、属性配置​

1. 数据源配置​

数据源配置

可选方式：​

  • 手动赋值：直接添加项或导入静态数据源
  • 数据绑定：绑定页面已有数据源，详见：数据绑定
  • 组件绑定：使用当前组件上下文中的数据集
  • 视图参数：引用页面路由传入的参数

示例（数据源配置）：

数据源配置示例

2. 功能配置​

功能面板

1）循环播放​

  • 启用后，轮播内容将首尾相接，形成“无缝”循环体验

2）自动切换​

  • 支持定时自动切换内容
  • 可配置切换间隔速度

3）手势滑动​

  • 开启后，用户可通过左右滑动手势切换内容项

4）指示点​

  • 在轮播图底部显示当前位置的圆点
  • 有助于用户判断当前所在项及轮播进度

示例：

指示点

5）垂直轮播​

  • 内容项按纵向排列滑动
  • 启用后需手动设置组件高度以保证内容完整显示

示例：

垂直轮播

6）初始轮播项​

  • 可设定加载时默认展示的轮播项索引

示例：

初始轮播项

3. 外观设置​

指示器颜色​

  • 支持自定义指示点颜色，匹配页面整体风格

示例：

指示器颜色

4. 状态配置​

无特殊状态配置项，详见：通用状态

三、样式设置​

无特殊样式项，详见：通用样式

四、常见使用场景​

1. 首页横幅轮播图​

展示营销广告、活动推荐或品牌宣传图

2. 商品推荐内容卡片​

滑动展示多项商品信息，提高页面信息承载量

3. 用户动态推荐​

用于展示内容列表、推荐视频、文章摘要等内容块

示例：

轮播场景示例