首頁 >每日程式設計 >html知識 >怎麼使用MIP元件

怎麼使用MIP元件

藏色散人
藏色散人原創
2018-11-02 17:51:516559瀏覽

本篇文章主要介紹MIP元件的簡單使用方法

MIP即行動網頁加速器,在前面的文章中已經給大家介紹過創建初始MIP檔案的方法以及需要注意的MIP規則#。

大家應該都知道MIP的優點在於提高行動網頁的載入速度,對行動裝置用戶是非常友善的。

那我們要怎麼去使用MIP元件呢?

首先大家要知道MIP元件包含哪些?

1、內建元件

內建元件是包含在 mip.js 中的元件,可直接使用,無需另外引進 JS 腳本。

2、個人化元件

個人化元件是滿足於特定需求的元件,包括互動、統計等需求。需要引入對應的 JS 腳本。

3、廣告元件

廣告元件主要滿足各類廣告的投放,需要引入對應的 JS 腳本。閱讀廣告文件來確定 MIP 廣告類型。

詳細元件內容可以參考PHP中文網的《MIP文件手冊

這裡主要跟大家介紹MIP內建元件:mip- carousel 多圖輪播的使用示範。

902f1c57866cca807a43e508695816e8 用來支持 MIP 中圖片的一種展示方式,支援多圖輪播。

例如在初始的mip1.html檔案中使用加上mip-carousel副標題效果的多圖輪播,只要將以下程式碼加入6c04bd5ca3fcae76e30b72ad730ca86d中就可以了:

<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元件中的參數進行修改。

這篇文章就是關於MIP元件的簡單使用介紹,也是非常通俗易懂的,在後期的文章中會繼續給大家介紹MIP頁面的測試。有興趣的朋友可以持續關注PHP中文網。

以上是怎麼使用MIP元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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