首頁 每日程式設計 html知識 Mip中列表元件怎麼用

Mip中列表元件怎麼用

Nov 06, 2018 pm 05:02 PM

本篇文章主要介紹MIP中列表元件的使用。

MIP(行動網頁加速器)中的清單元件可以渲染同步數據,或非同步請求資料後渲染。

推薦參考手冊:《MIP文件手冊

#下面我們透過元件程式碼範例給大家詳細介紹MIP中清單元件的使用。

如果我們想要在mip檔案中執行清單元件,需要在mip檔案body中引入以下js腳本:

<script src="https://c.mipcdn.com/static/v1/mip-list/mip-list.js"> </script>
<script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"> </script>
登入後複製

1、基本用法##

<mip-list src="https://xxx" preLoad>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>
登入後複製

註:JSONP 非同步請求的介面需要遵循規範callback 為'callback'。

2、自訂範本

<mip-list template="mip-template-id" src="https://xxx" preLoad>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>
登入後複製

3、同步資料

<mip-list synchronous-data>
    <script type="application/json">
        {            "items": [
                {                    "name": "lee",                    "alias": "xialong"
                }, {                    "name": "ruige",                    "alias": "ruimm"
                }, {                    "name": "langbo",                    "alias": "bobo"
                }
            ]
        }    </script>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>
登入後複製

4、點選載入更多

<mip-list 
    template="mip-template-id"
    src="http://xxx?a=a&b=b"
    id="mip-list"
    has-more
    pnName="pageNum"
    pn=2
    timeout="3000"
    preLoad>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>{{key}}: {{value}}</li>
        </div>
    </template></mip-list><div class="mip-list-more" on="tap:mip-list.more"> 点击查看更多 </div>
登入後複製

註:有has-more 屬性時, 標籤必須要有id 屬性,同時需要點擊按鈕的DOM 節點,且此節點有on 屬性,屬性值為:tap:對應mip-list的id.more

相關屬性介紹:

src:非同步請求的資料接口,如果沒有其他參數結尾請不要帶?


synchronous-data:使用同步資料開關屬性


id: 元件id


has-more:是否有點擊展開更多功能


pnName:翻頁變數名稱


pn:翻頁初始頁碼,每次請求都會自動加1


preLoad:非同步載入數據,如果新增preLoad 參數,則在初始化時載入第一頁內容

timeout:fetch-jsonp 請求的逾時時間。

這篇文章是關於MIP中清單元件的使用介紹,希望對需要的朋友有幫助!那麼更多常見的MIP元件,如

輪播圖元件內嵌框架元件折疊選單元件App推廣下載元件Mip表單元件Mip快速回頂元件等,有興趣的朋友也可以參考相關文章學習!

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

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)