Mip中列表组件怎么用

本篇文章主要给大家介绍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 属性时，7669d52c491d4a1bb52db402c0dd397d 标签必须要有 id 属性，同时需要有点击按钮的 DOM 节点，并且此节点有 on 属性，属性值为：tap:对应mip-list的id.more

相关属性介绍：

src：异步请求的数据接口，如果没有其他参数结尾请不要带 ？

synchronous-data：使用同步数据开关属性

id：7669d52c491d4a1bb52db402c0dd397d 组件 id

has-more：是否有点击展开更多功能

pnName：翻页变量名

pn：翻页初始页码，每次请求会自动加 1

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

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

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

以上是Mip中列表组件怎么用的详细内容。更多信息请关注PHP中文网其他相关文章！