轮播图组件
使用场景
轮播图组件可以用于展示多张图片,常见于网站、APP、小程序等场景。例如,电商网站的商品详情页通常会使用轮播图展示商品的多张图片;APP 的首页或特定页面也会使用轮播图展示推广信息、活动信息等。此外,轮播图组件也可以用于展示一系列相关的内容,如文章、新闻、图片等。
组件视图

组件使用
1、从组件树中找到【轮播图】,按住鼠标拖入到画布,即向页面中添加了一个轮播图组件。
配置说明
1、图片
属性名 | 属性说明 | 备注 |
---|---|---|
图片(网页端) | 当用户设备为电脑端时,展示该图片 | |
图片(移动端) | 当用户设备为移动端时,展示该图片 | |
热区域配置 | 绑定图片某些区域,引流点击跳转 | 每张图片最多可绑定五个热区 |
标题、描述 | 自定义图片标题、描述 | 注意:富文本中的居左、中、右只是文字居内容方向,配置项「内容位置」的左、中、右是根据图片位置排列 |
按钮组 | 图片按钮 | 每张图片最多可添加两个按钮 |
按钮标题 | 按钮展示文本 | |
按钮链接 | 点击按钮跳转的地址 | 可绑定自定义链接或者当前应用内页面 |
按钮文案颜色、按钮背景色 | 按钮展示样式 | |
图片透明度 | 图片的透明度 | 注意:数值越大,图片越模糊,配置项「轮播图背景色」越明显 |
显示文本阴影 | 标题、描述显示的阴影 | 开启后,配置项「标题、描述」区域底部会存在阴影 |
内容位置 | 配置项「标题、描述、按钮组」展示的位置 | 左、中、右 |
2、展示
属性名 | 属性说明 | 备注 |
---|---|---|
图片高度 | 图片展示的高度,默认为第一张图片的高度 | 注意:区分网页端、移动端,都是按照第一张图片高度设定,建议其他图片保持和第一张图片尺寸比例相近 |
轮播方式 | 图片滑动时的方向 | 水平、垂直 |
轮播图背景色 | 图片底色 | 当配置项「透明度」越高时,底色越明显 |
显示边距 | 开启后,轮播图与四周会有距离,整体宽度和网站版心尺寸一致 | |
图片是否铺满容器 | 当其他图片和第一张图片尺寸不一致时,开启该项会拉伸其他图片,使其铺满整个轮播图 | |
翻转风格 | 轮播图轮播时展示的可点击轮播按钮,分为圆点、进度条 | |
滑动时间 | 每张图片轮播时的时间 | 范围为 0-10s,步长为 1 |
其他子组件配置可参考对应文档:
注意事项
- 1、每个轮播图最多可添加五个图片,每个图片分网页端和移动端;网页端图片和移动端图片的热区绑定是独立的