MIP个性化组件mip-list 列表组件

标题 内容
类型 通用
支持布局 responsive,fixed-height,fill,container,fixed
所需脚本 http://mipcache.bdstatic.com/static/v1/mip-list/mip-list.js
https://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js

示例

基本用法

<mip-list src="https://xxx">
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template>
</mip-list>

定制模板

<mip-list template="mip-template-id" src="https://xxx">
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template>
</mip-list>

同步数据

<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>

点击加载更多

<mip-list template="mip-template-id" src="http://xxx?" id="mip-list" has-more>
    <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>

属性

src
说明:异步请求的数据接口
必选项:否
类型:字符串
取值范围:必须是https的
单位:无
默认值:无

synchronous-data
说明:使用同步数据开关属性
必选项:否
类型:字符串
取值范围:无
单位:无
默认值:无

id
说明:mip-list 组件id
必选项:否
类型:字符串
取值范围:字符串
单位:无
默认值:无

has-more
说明:是否有点击展开更多功能
必选项:否
类型:字符串
取值范围:无
单位:无
默认值:无

注意事项

1、异步请求的接口需要规范过callback 为 'callback'
2、有has-more 属性时,mip-list标签,必须要有id属性,同时需要有点击按钮的dom节点,并且此节点有on属性,属性值为:tap:你的mip-list的id.more


发布日期:

所属分类: 网站运营 SEO 标签: