首頁  >  文章  >  每日程式設計  >  Mip輪播圖組件中的重要屬性講解

Mip輪播圖組件中的重要屬性講解

藏色散人
藏色散人原創
2018-11-03 16:23:455051瀏覽

本篇文章主要跟大家介紹MIP輪播圖組件中的重要屬性講解。

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>

上述元件程式碼,呈現的效果如下圖:

Mip輪播圖組件中的重要屬性講解

#這裡需要注意的重要屬性如下:

autoplay 屬性:用來規定輪播圖是否自動播放。如果沒有這個屬性,輪播圖只能手動點擊切換。

defer屬性:表示每次輪播的時間間隔,如果設定了autoplay,可以加入defer 來指定輪播的時間間隔

indicatorId屬性:下方指示器功能字段,和指示器的父節點的id 取值請保持一致,指示器的數量和輪播的item 個數必須保持一致,指示器這塊對id 是強依賴,樣式可以自行修改,範例中是官方預設樣式,指示器可點選定位。

widthheight屬性:分別表示與高度、寬度屬性配合來設定的圖片比例。不是實際寬高度。

indicator屬性:設定輪播圖上顯示的頁數,如上圖右下方的數字顯示。

layout設定值為responsive則是表示允許圖片自適應。

這篇文章就是關於MIP輪播圖元件中重要屬性的介紹,希望對需要的朋友有幫助!

以上是Mip輪播圖組件中的重要屬性講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn