本篇文章主要跟大家介紹MIP輪播圖組件中的重要屬性講解。
MIP,行動網頁加速器。關於MIP輪播圖組件的介紹,我們在先前的文章中,已經透過舉例一個輪播圖元件,來給大家介紹MIP元件的使用。那麼這個簡單的輪播圖元件範例就是
推薦參考MIP使用手冊:《MIP文檔手冊》
#下面我們就結合簡單的組件程式碼例子,介紹MIP輪播圖中的重要屬性。
<mip-carousel autoplay defer="1000" layout="responsive" width="600" height="400" indicator buttonController > <a target="_blank" href="http://www.php.cn"> <mip-img src="你的图片地址" layout="responsive" width="600" height="400"></mip-img> <div class="mip-carousle-subtitle">这里是标题</div> </a> <mip-img src="你的图片地址"></mip-img> <mip-img src="你的图片地址"></mip-img> </mip-carousel>
上述元件程式碼,呈現的效果如下圖:
#這裡需要注意的重要屬性如下:
autoplay 屬性:用來規定輪播圖是否自動播放。如果沒有這個屬性,輪播圖只能手動點擊切換。
defer屬性:表示每次輪播的時間間隔,如果設定了autoplay,可以加入defer 來指定輪播的時間間隔
indicatorId屬性:下方指示器功能字段,和指示器的父節點的id 取值請保持一致,指示器的數量和輪播的item 個數必須保持一致,指示器這塊對id 是強依賴,樣式可以自行修改,範例中是官方預設樣式,指示器可點選定位。
width和height屬性:分別表示與高度、寬度屬性配合來設定的圖片比例。不是實際寬高度。
indicator屬性:設定輪播圖上顯示的頁數,如上圖右下方的數字顯示。
layout設定值為responsive則是表示允許圖片自適應。
這篇文章就是關於MIP輪播圖元件中重要屬性的介紹,希望對需要的朋友有幫助!
以上是Mip輪播圖組件中的重要屬性講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!