mip-carousel 多图轮播

<mip-carousel> 用来支持 MIP 中图片的一种展示方式，支持多图轮播。

标题 内容
类型 通用
支持布局 fixed-height,responsive
所需脚本 无

示例

responsive 布局

  1. <mip-carousel
  2.     layout="responsive"
  3.     width="600"
  4.     height="400">
  5.     <mip-img
  6.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  7.     </mip-img>
  8.     <mip-img
  9.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  10.     </mip-img>
  11.     <mip-img
  12.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  13.     </mip-img>
  14. </mip-carousel>

自动轮播

  1. <mip-carousel
  2.     autoplay
  3.     layout="responsive"
  4.     width="600"
  5.     height="400">
  6.     <mip-img
  7.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  8.     </mip-img>
  9.     <mip-img
  10.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  11.     </mip-img>
  12.     <mip-img
  13.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  14.     </mip-img>
  15. </mip-carousel>

设置轮播时间间隔

  1. <mip-carousel
  2.     autoplay
  3.     defer="1000"
  4.     layout="responsive"
  5.     width="600"
  6.     height="400">
  7.     <mip-img
  8.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  9.     </mip-img>
  10.     <mip-img
  11.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  12.     </mip-img>
  13.     <mip-img
  14.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  15.     </mip-img>
  16. </mip-carousel>

加数字指示器

  1. <mip-carousel
  2.     autoplay
  3.     defer="1000"
  4.     layout="responsive"
  5.     width="600"
  6.     height="400"
  7.     indicator
  8.     >
  9.     <mip-img
  10.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  11.     </mip-img>
  12.     <mip-img
  13.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  14.     </mip-img>
  15.     <mip-img
  16.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  17.     </mip-img>
  18. </mip-carousel>

加下方指示器

  1. <mip-carousel
  2.     autoplay
  3.     defer="1000"
  4.     layout="responsive"
  5.     width="600"
  6.     height="400"
  7.     indicator
  8.     indicatorId="mip-carousel-example"
  9.     >
  10.     <mip-img
  11.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  12.     </mip-img>
  13.     <mip-img
  14.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  15.     </mip-img>
  16.     <mip-img
  17.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  18.     </mip-img>
  19. </mip-carousel>
  20. <div class="mip-carousel-indicator-wrapper">
  21.     <div class="mip-carousel-indicatorDot" id="mip-carousel-example">
  22.         <div class="mip-carousel-activeitem mip-carousel-indecator-item"></div>
  23.         <div class="mip-carousel-indecator-item"></div>
  24.         <div class="mip-carousel-indecator-item"></div>
  25.     </div>
  26. </div>

加翻页按钮

  1. <mip-carousel
  2.     defer="1000"
  3.     layout="responsive"
  4.     width="600"
  5.     height="400"
  6.     indicator
  7.     buttonController
  8.     >
  9.    <mip-img
  10.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  11.     </mip-img>
  12.     <mip-img
  13.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  14.     </mip-img>
  15.     <mip-img
  16.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  17.     </mip-img>
  18. </mip-carousel>

加副标题

  1. <mip-carousel
  2.     autoplay
  3.     defer="1000"
  4.     layout="responsive"
  5.     width="600"
  6.     height="400"
  7.     indicator
  8.     buttonController
  9.     >
  10.     <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
  11.         <mip-img
  12.             src="https://www.mipengine.org/static/img/sample_01.jpg" layout="responsive"
  13.         width="600"
  14.         height="400">
  15.         </mip-img>
  16.         <div class="mip-carousle-subtitle">这里是title2</div>
  17.     </a>
  18.     <mip-img
  19.         src="https://www.mipengine.org/static/img/sample_02.jpg">
  20.     </mip-img>
  21.     <mip-img
  22.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  23.     </mip-img>
  24. </mip-carousel>

点击图片跳转

非 <mip-carousel> 直接子级元素的 <mip-img> 节点需要设置 width 和 height 属性。

  1. <mip-carousel
  2.     autoplay
  3.     defer="1000"
  4.     layout="responsive"
  5.     width="600"
  6.     height="400">
  7.     <mip-img
  8.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  9.     </mip-img>
  10.     <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
  11.         <mip-img
  12.             src="https://www.mipengine.org/static/img/sample_02.jpg" width="600" height="400">
  13.         </mip-img>
  14.     </a>
  15.     <mip-img
  16.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  17.     </mip-img>
  18. </mip-carousel>

自定义处理翻页事件

每次翻页时，mip-carousel 会对外暴露 switchCompleted 事件，事件被触发时，在你自己的组件内处理对应的逻辑即可。可以通过Events 事件绑定章节了解更多事件通信的处理细节。

  1. <mip-carousel
  2.     autoplay
  3.     defer="1000"
  4.     layout="responsive"
  5.     width="600"
  6.     height="400"
  7.     on="switchCompleted:mip-test.hanlde"
  8.     >
  9.     <mip-img
  10.         src="https://www.mipengine.org/static/img/sample_01.jpg">
  11.     </mip-img>
  12.     <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa">
  13.         <mip-img
  14.             src="https://www.mipengine.org/static/img/sample_02.jpg" width="600" height="400">
  15.         </mip-img>
  16.     </a>
  17.     <mip-img
  18.         src="https://www.mipengine.org/static/img/sample_03.jpg">
  19.     </mip-img>
  20. </mip-carousel>
  21. <mip-element id="mip-test"></mip-element>

属性

width

说明：宽度，不是实际宽度，与高度属性配合来设置图片比例，详见组件布局
必选项：是
类型：数字
单位：无
默认值：无

height

说明：高度，不是实际高度，与宽度属性配合来设置图片比例，详见组件布局
必选项：是
类型：数字
单位：无
默认值：无

autoplay

说明：自动轮播开关
必选项：否
类型：字符串或空
取值：””, autoplay
单位：无
默认值：无

defer

说明：每次轮播的时间间隔，如果设置了 autoplay，可以添加 defer 来指定轮播的时间间隔
必选项：否
类型：数字
单位：ms
默认值：2000

indicator

说明：下方默认提供的数字指示器。
必选项：否
类型：字符串或空
取值：””, indicator
单位：无
默认值：无

indicatorId

说明：下方指示器功能字段，和指示器的父节点的 id 取值请保持一致，指示器的个数和轮播的 item 个数必须保持一致，指示器这块对 id 是强依赖，样式可以自行修改，示例中是官方默认样式，指示器可点击定位。
必选项：否
类型：字符串
单位：无
默认值：无

buttonController

说明：翻页按钮功能字段，使用这个字段之后，轮播页左右侧会出现前进后退的翻页按钮，点击可执行相应的操作。
必选项：否
类型：字符串或空
取值：””, buttonController
单位：无
默认值：无

autoheight

说明：实现轮播图的宽度为 100%，而高度是自适应的，即根据图片来更改轮播图的高度。
必选项：否
类型：字符串或空
取值：””, autoheight
单位：无
默认值：无

事件

switchCompleted

说明：当每一页切换完成之后，会触发该事件，事件参数会返回当前展示的dom节点，carousel 子元素的总数，当前展示的carousel item的索引值。
一个返回参数示例如下：

  1. {
  2.   currIndex: 2,  // 当前子元素的显示索引值
  3.   currCarouselItem: childNodes[imgIndex], // 当前子元素的dom节点
  4.   carouselChildrenLength: childNum // 当前 carousel 下的子节点个数
  5. }