mip-carousel 多图轮播
mip-carousel 用来支持 mip 中图片的一种展示方式,支出多图轮播。
示例
response 布局
<mip-carousel layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
自动轮播
<mip-carousel autoplay layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
设置轮播时间间隔
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
加指示器
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator > <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
加翻页按钮
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator buttonController > <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
加副标题
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator buttonController > <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa"> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" layout="responsive" width="600" height="400"> </mip-img> <div class="mip-carousle-subtitle">这里是title2</div> </a> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg"> </mip-img> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
非 mip-carousel 直接子级元素的 mip-img 节点需要设置 width 和 height 属性
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400"> <mip-img src="http://a2.att.hudong.com/71/04/300224654811132504044925945_950.jpg"> </mip-img> <a target="_blank" href="http://wenda.tianya.cn/m/question/1almfj0foas94gc7vtoq6ejbfbmdk3e78ehaa"> <mip-img src="http://www.bz55.com/uploads/allimg/150305/139-1503051FS0.jpg" width="600" height="400"> </mip-img> </a> <mip-img src="http://img3.3lian.com/2013/v9/58/d/25.jpg"> </mip-img> </mip-carousel>
属性
width
说明:宽度,不是实际宽度,与高度属性配合来设置图片比例
必选项:是
类型:数字
单位:无
默认值:无
height
说明:高度,不是实际高度,与宽度属性配合来设置图片比例
必选项:是
类型:数字
单位:无
默认值:无
autoplay
说明:自动轮播开关
必选项:否
类型:字符串或空
取值:"",autoplay
单位:无
默认值:无
defer
说明:每次轮播的时间间隔,如果设置了autoplay
,可以添加defer
来指定轮播的时间间隔
必选项:否
类型:数字
单位:ms
默认值:2000