MIP Documentation Manual
/ mip-list 列表組件
mip-list 列表組件
mip-list 列表組件
mip-list 列表組件,可以渲染同步數(shù)據(jù),或者異步請求數(shù)據(jù)后渲染
示例
基本用法
<mip-list src="https://xxx"> <template type="mip-mustache"> <div> <li>name: {{name}}</li> <li>alias: {{alias}}</li> </div> </template> </mip-list>
定制模板
<mip-list template="mip-template-id" src="https://xxx"> <template type="mip-mustache" id="mip-template-id"> <div> <li>name: {{name}}</li> <li>alias: {{alias}}</li> </div> </template> </mip-list>
同步數(shù)據(jù)
<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>
點(diǎn)擊加載更多
<mip-list template="mip-template-id" src="http://xxx?" id="mip-list" has-more> <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"> 點(diǎn)擊查看更多 </div>
屬性
src
說明:異步請求的數(shù)據(jù)接口
必選項:否
類型:字符串
取值范圍:必須是https的
單位:無
默認(rèn)值:無
synchronous-data
說明:使用同步數(shù)據(jù)開關(guān)屬性
必選項:否
類型:字符串
取值范圍:無
單位:無
默認(rèn)值:無
id
說明:mip-list 組件id
必選項:否
類型:字符串
取值范圍:字符串
單位:無
默認(rèn)值:無
has-more
說明:是否有點(diǎn)擊展開更多功能
必選項:否
類型:字符串
取值范圍:無
單位:無
默認(rèn)值:無
注意事項
- 異步請求的接口需要規(guī)范過callback 為 'callback'
- 有has-more 屬性時,mip-list標(biāo)簽,必須要有id屬性,同時需要有點(diǎn)擊按鈕的dom節(jié)點(diǎn),并且此節(jié)點(diǎn)有on屬性,屬性值為:tap:你的mip-list的id.more