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 属性时，<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快速回顶组件等，感兴趣的朋友也可以参考相关文章学习！

列表组件