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>
登入後複製
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中文網其他相關文章!
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前
By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
R.E.P.O.保存文件位置:在哪里以及如何保護它?
3 週前
By DDD

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

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