Carousel 轮播图

基本用法

```schema: scope=”body” { “type”: “carousel”, “auto”: false, “thumbMode”: “cover”, “animation”: “slide”, “height”: 300, “options”: [ { “image”: “https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png“ }, { “html”: “

carousel data
“ }, { “thumbMode”: “contain”, “image”: “https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg“ } ] }

  2. ## 动态列表
  4. 轮播图组件目前没有获取数据的配置，因此需要依赖 `service` 来获取数据。
  6. ```schema: scope="body"
  7. {
  8.   "type": "page",
  9.   "body": {
  10.     "type": "service",
  11.     "api": "/api/mock2/options/carousel",
  12.     "body": {
  13.       "type": "carousel",
  14.       "name": "imageList"
  15.     }
  16.   }
  17. }

目前数据关联是通过 name 的方式，因此 api 返回应该是类似这样的：

  1. {
  2.     status: 0,
  3.     msg: '',
  4.     data: {
  5.         imageList: [{
  6.             "image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png"
  7.         }]
  8.     }
  9. }

其中的 imageList 要和配置的 name 值对应。

点击图片打开外部链接

1.3.3 及以上版本

需要放回的字段中除了前面的 image，还有 href 属性

```schema: scope=”body” { “type”: “page”, “data”: { “imageList”: [ { “image”: “https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png“, “href”: “https://github.com/baidu/amis“ } ] }, “body”: { “type”: “carousel”, “name”: “imageList” } }

  2. ## 自定义轮播图的展现
  4. 通过配置 `itemSchema` 可以自定义轮播图的展现，比如图片默认背景配置是 contain，可以改成 cover：

itemSchema: { type: ‘tpl’, tpl: ‘

‘ } ```

属性表

属性名 类型 默认值 说明
type string "carousel" 指定为 Carousel 渲染器
className string "panel-default" 外层 Dom 的类名
options array [] 轮播面板数据
options.image string 图片链接
options.href 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模式
thumbMode string `”cover” \ “contain”` 图片默认缩放模式

事件表

当前组件会对外派发以下事件，可以通过onEvent来监听这些事件，并通过actions来配置执行的动作，在actions中可以通过event.data.xxx事件参数变量来获取事件产生的数据，详细请查看事件动作。

事件名称 事件参数 说明
change event.data.activeIndex: number 激活图片的索引
prevIndex: number 上一张图片的索引		 轮播图切换时触发

动作表

当前组件对外暴露以下特性动作，其他组件可以通过指定actionType: 动作名称、componentId: 该组件id来触发这些动作，动作配置可以通过args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。

动作名称 动作配置 说明
next - 下一张
prev - 上一张
goto-image activeIndex: number 切换图片的索引 切换轮播图