mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-08 15:09:36 +08:00
da11820447
* 修复 string2regExp 报错, 传入的时候先转成字符 * 修复 diffEditor 报错 * 修复 default filter 问题 * 修复文档链接错误 * 增加轮播图动态获取数据的说明 * 补充轮播图自定义的文档 Co-authored-by: 2betop <2betop.cn@gmail.com>
5.4 KiB
Executable File
5.4 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Carousel 轮播图 | 0 | ⚙ 组件 | Carousel 幻灯片 | 33 |
基本用法
{
"type": "carousel",
"options": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
},
{
"html": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
},
{
"image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
}
]
}
动态列表
轮播图组件目前没有获取数据的配置,因此需要依赖 service
来获取数据。
{
"type": "page",
"body": {
"type": "service",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/options/carousel",
"body": {
"type": "carousel",
"name": "imageList"
}
}
}
目前数据关联是通过 name 的方式,因此 api 返回应该是类似这样的:
{
status: 0,
msg: '',
data: {
imageList: [{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
}]
}
}
其中的 imageList
要和配置的 name
值对应。
自定义轮播图的展现
通过配置 itemSchema
可以自定义轮播图的展现,比如图片默认背景配置是 contain,可以改成 cover:
itemSchema: {
type: 'tpl',
tpl: '<div style="background-image: url('<%= data.image %>'); background-size: cover; background-repeat: no-repeat; background-position: center center;" class="image <%= data.imageClassName %>"></div>'
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"carousel" |
指定为 Carousel 渲染器 |
className | string |
"panel-default" |
外层 Dom 的类名 |
options | array |
[] |
轮播面板数据 |
options.image | string |
图片链接 | |
options.imageClassName | string |
图片类名 | |
options.title | string |
图片标题 | |
options.titleClassName | string |
图片标题类名 | |
options.description | string |
图片描述 | |
options.descriptionClassName | string |
图片描述类名 | |
options.html | string |
HTML 自定义,同Tpl一致 | |
itemSchema | object |
自定义schema 来展示数据 |
|
auto | boolean |
true |
是否自动轮播 |
interval | string |
5s |
切换动画间隔 |
duration | string |
0.5s |
切换动画时长 |
width | string |
auto |
宽度 |
height | string |
200px |
高度 |
controls | array |
['dots', 'arrows'] |
显示左右箭头、底部圆点索引 |
controlsTheme | string |
light |
左右箭头、底部圆点索引颜色,默认light ,另有dark 模式 |
animation | string |
fade | 切换动画效果,默认fade ,另有slide 模式 |
type
请设置成carousel
className
外层 Dom 的类名options
轮播面板数据,默认[]
,支持以下模式- 图片
image
图片链接imageClassName
图片类名title
图片标题titleClassName
图片标题类名description
图片描述descriptionClassName
图片描述类名
html
HTML 自定义,同Tpl一致
- 图片
itemSchema
自定义schema
来展示数据auto
是否自动轮播,默认true
interval
切换动画间隔,默认5s
duration
切换动画时长,默认0.5s
width
宽度,默认auto
height
高度,默认200px
controls
显示左右箭头、底部圆点索引,默认['dots', 'arrows']
controlsTheme
左右箭头、底部圆点索引颜色,默认light
,另有dark
模式animation
切换动画效果,默认fade
,另有slide
模式