本篇文章主要介紹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>
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 屬性時,
相關屬性介紹:
src:非同步請求的資料接口,如果沒有其他參數結尾請不要帶?輪播圖元件、內嵌框架元件、折疊選單元件、App推廣下載元件、Mip表單元件、Mip快速回頂元件等,有興趣的朋友也可以參考相關文章學習!
以上是Mip中列表元件怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章!