mip-list 列表组件
可以渲染同步数据，或者异步请求数据后渲染。
| 标题 | 内容 |
|---|---|
| 类型 | 通用 |
| 支持布局 | responsive, fixed-height, fill, container, fixed |
| 所需脚本 | https://c.mipcdn.com/static/v2/mip-list/mip-list.js |
https://c.mipcdn.com/static/v2/mip-mustache/mip-mustache.js
示例
基本用法
JSONP 异步请求的接口需要遵循规范
callback为'callback'。
12345678<mip-list src="https://raw.githubusercontent.com/mipengine/mip2-extensions/master/components/mip-list/example/data.js" preload>
<template type="mip-mustache">
<div>
<li>name: {{ name }}</li>
<li>alias: {{ alias }}</li>
</div>
</template>
</mip-list>定制模板
123456789101112<mip-list
template="mip-template-id1"
src="https://raw.githubusercontent.com/mipengine/mip2-extensions/master/components/mip-list/example/data.js"
preload
>
<template type="mip-mustache" id="mip-template-id1">
<div>
<li>name: {{ name }}</li>
<li>alias: {{ alias }}</li>
</div>
</template>
</mip-list>同步数据
12345678910111213141516171819202122<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>点击加载更多
有
has-more属性时，<mip-list>标签必须要有id属性，同时需要有点击按钮的 DOM 节点，并且此节点有on属性，属性值为：tap:对应mip-list的id.more
1234567891011121314151617<mip-list
template="mip-template-id2"
src="https://raw.githubusercontent.com/mipengine/mip2-extensions/master/components/mip-list/example/data-has-more.js"
id="mip-list"
has-more
pn-name="pageNum"
pn="2"
timeout="3000"
preload
>
<template type="mip-mustache" id="mip-template-id2">
<div>
<li>name: {{ name }}</li>
</div>
</template>
</mip-list>
<button on="tap:mip-list.more">点击查看更多</button>属性
src
说明：异步请求的数据接口，如果没有其他参数结尾请不要带 ？
必选项：否
类型：字符串
取值范围：必须是 HTTPS 的
单位：无
默认值：无
synchronous-data
说明：使用同步数据开关属性
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：无
id
说明：<mip-list> 组件 id
必选项：否
类型：字符串
取值范围：字符串
单位：无
默认值：无
has-more
说明：是否有点击展开更多功能
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：无
pn-name
说明：翻页变量名
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：pn
pn
说明：翻页初始页码，每次请求会自动加 1
必选项：否
类型：整数
取值范围：无
单位：无
默认值：1
preload
说明：异步加载数据，如果添加 preload 参数，则在初始化时加载第一页内容
必选项：否
timeout
说明：fetch-jsonp 请求的超时时间
必选项：否
类型：整数
取值范围：无
单位：ms
默认值：5000
注意事项
- 接口返回的数据格式需要是如下格式：
- status：0 表示请求成功。
- items：[] 是需要渲染的数序。
- isEnd：表示是否是最后一页，非必须。
1234567{ status: 0, data: { items: [], isEnd: 1 } }