Mip中列表元件怎麼用

藏色散人
發布: 2018-11-06 17:04:01
原創
3600 人瀏覽過

本篇文章主要介紹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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板