Mip中列表元件怎麼用

本篇文章主要介紹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 屬性時，7669d52c491d4a1bb52db402c0dd397d 標籤必須要有id 屬性，同時需要點擊按鈕的DOM 節點，且此節點有on 屬性，屬性值為：tap:對應mip-list的id.more

相關屬性介紹：

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

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

id：7669d52c491d4a1bb52db402c0dd397d 元件id

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

pnName：翻頁變數名稱

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

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

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

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

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

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