amis/docs/zh-CN/components/carousel.md
liaoxuezhi 0fae923b93
chore: 调整 image 和 carousel (#2412)
* chore: 调整 image 和 carousel

1. image 扩充源码模式
2. carousel 扩充图片裁剪模式 cover | contain

* 更新 snapshot

* 补充样式
2021-08-19 15:06:29 +08:00

5.7 KiB
Executable File
Raw Blame History

title description type group menuName icon order
Carousel 轮播图 0 ⚙ 组件 Carousel 幻灯片 33

基本用法

{
    "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": "<div style=\"width: 100%; height: 300px; background: #e3e3e3; text-align: center; line-height: 300px;\">carousel data</div>"
        },
        {
            "thumbMode": "contain",
            "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg"
        }
    ]
}

动态列表

轮播图组件目前没有获取数据的配置,因此需要依赖 service 来获取数据。

{
  "type": "page",
  "body": {
    "type": "service",
    "api": "/api/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模式
thumbMode string "cover" | "contain" 图片默认缩放模式
  • 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模式
  • thumbMode 图片默认缩放模式,可以配置 "cover" | "contain"