Mip中列表组件怎么用-html知识-PHP中文网

Mip中列表组件怎么用

藏色散人

发布： 2018-11-06 17:02:29

原创

3910人浏览过

本篇文章主要给大家介绍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

相关属性介绍：