MIP文檔手冊(cè)
/ mip-carousel 多圖輪播
mip-carousel 多圖輪播
mip-carousel 用來(lái)支持 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>
自動(dòng)輪播
<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>
設(shè)置輪播時(shí)間間隔
<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>
加翻頁(yè)按鈕
<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>
加副標(biāo)題
<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 直接子級(jí)元素的 mip-img 節(jié)點(diǎn)需要設(shè)置 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
說明:寬度,不是實(shí)際寬度,與高度屬性配合來(lái)設(shè)置圖片比例
必選項(xiàng):是
類型:數(shù)字
單位:無(wú)
默認(rèn)值:無(wú)
height
說明:高度,不是實(shí)際高度,與寬度屬性配合來(lái)設(shè)置圖片比例
必選項(xiàng):是
類型:數(shù)字
單位:無(wú)
默認(rèn)值:無(wú)
autoplay
說明:自動(dòng)輪播開關(guān)
必選項(xiàng):否
類型:字符串或空
取值:"",autoplay
單位:無(wú)
默認(rèn)值:無(wú)
defer
說明:每次輪播的時(shí)間間隔,如果設(shè)置了autoplay
,可以添加defer
來(lái)指定輪播的時(shí)間間隔
必選項(xiàng):否
類型:數(shù)字
單位:ms
默認(rèn)值:2000