百度智能小程序 宮格

grid 宮格

解釋：宮格組件，包含上圖下文和左圖右文兩種樣式?？膳渲脠D片、主標題文案、副標題文案。適用于信息展示，并可放置在頁面的任何位置。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

<!-- 默認 -->
<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"
    }
}