本篇文章主要给大家介绍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>注：JSONP 异步请求的接口需要遵循规范 callback 为 'callback'。
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 属性时，<mip-list> 标签必须要有 id 属性，同时需要有点击按钮的 DOM 节点，并且此节点有 on 属性，属性值为：tap:对应mip-list的id.more
相关属性介绍：
src：异步请求的数据接口，如果没有其他参数结尾请不要带 ？
synchronous-data：使用同步数据开关属性
id：<mip-list> 组件 id
has-more：是否有点击展开更多功能
pnName：翻页变量名
pn：翻页初始页码，每次请求会自动加 1
preLoad：异步加载数据，如果添加 preLoad 参数，则在初始化时加载第一页内容
timeout：fetch-jsonp 请求的超时时间。
本篇文章就是关于MIP中列表组件的使用介绍，希望对需要的朋友有所帮助！那么更多的常见的MIP组件，如轮播图组件、内联框架组件、折叠菜单组件、App推广下载组件、Mip表单组件、Mip快速回顶组件等，感兴趣的朋友也可以参考相关文章学习！
