mip-list list component
mip-list list component
mip-list list component can render synchronous data, or render asynchronously after requesting data
Example
Basic usage
<mip-list src="https://xxx">
<template type="mip-mustache">
<div>
<li>name: {{name}}</li>
<li>alias: {{alias}}</li>
</div>
</template>
</mip-list>Customized template
<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>Sync data
<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>Click to load more
<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"> 点击查看更多 </div>Properties
src
Description: Data interface for asynchronous requests
Required options: No
Type: String
Value range: Must be https
Unit: None
Default Value: None
synchronous-data
Description: Use synchronous data switch attribute
Required option: No
Type: String
Value range: None
Unit: None
Default value: None
id
Description: mip-list component id
Required option: No
Type: String
Value range ：String
Unit: None
Default value: None
has-more
Description: Whether there is click to expand more functions
Required option: No
Type: String
Value range: None
Unit: None
Default value: None
Notes
- The interface for asynchronous requests needs to be standardized with callback When there is a has-more attribute for 'callback'
- , the mip-list tag must have an id attribute, and a dom node for clicking the button, and this node has an on attribute, and the attribute value is: tap: The id.more
