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

相关属性介绍：

preLoad：异步加载数据，如果添加 preLoad 参数，则在初始化时加载第一页内容

timeout：fetch-jsonp 请求的超时时间。

本篇文章就是关于MIP中列表组件的使用介绍，希望对需要的朋友有所帮助！那么更多的常见的MIP组件，如轮播图组件、内联框架组件、折叠菜单组件、App推广下载组件、Mip表单组件、Mip快速回顶组件等，感兴趣的朋友也可以参考相关文章学习！

以上就是Mip中列表组件怎么用的详细内容，更多内容请关注技术你好其它相关文章！