百度智能小程序 宫格

grid 宫格

解释：宫格组件，包含上图下文和左图右文两种样式。可配置图片、主标题文案、副标题文案。适用于信息展示，并可放置在页面的任何位置。

属性说明

示例 

在开发者工具中打开

代码示例

<!-- 默认 -->
<smt-grid
    bind:clickhld="clickHld"
    list="{{list}}"
></smt-grid>
<!-- 三列 + 上图下文 -->
<smt-grid 
    bind:clickhld="clickHld"
    item-class="item"
    title-class="title"
    sub-title-class="sub-title"
    list="{{list}}"
    column-num="{{3}}"
></smt-grid>
<!-- 三列 + 左图右文 -->
<smt-grid
    type="horizontal"
    bind:clickhld="clickHld"
    item-class="item"
    title-class="title"
    list="{{horizontalList}}"
    column-num="{{3}}"
></smt-grid>

Page({
    data: {
        list: [
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '主标题文案六',
                subTitle: '次要信息'
            },
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '主标题文案七',
                subTitle: '次要信息'
            },
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '主标题文案八',
                subTitle: '次要信息'
            },
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '主标题文案九',
                subTitle: '次要信息'
            }
        ],
        horizontalList: [
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '标题文案'
            },
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '标题文案'
            },
            {
                imgSrc: 'http://d.hiphotos.baidu.com/zhidao/pic/item/c8177f3e6709c93d8b21fbe49c3df8dcd00054d6.jpg',
                title: '标题文案'
            }
        ]
    },
    clickHld({detail}) {
        console.log(detail, '点击项详情')
    }
});

.item {
    <!-- 此处可自定义单项宫格外部样式 -->
}

.title{
    <!-- 此处可自定义宫格标题样式 -->
}

.sub-title {
    <!-- 此处可自定义宫格副标题样式 -->
}

{
    "navigationBarTitleText": "宫格",
    "usingComponents": {
        "smt-grid": "@smt-ui/component/src/grid"
    }
}