百度智能小程序 宫格
grid 宫格
解释：宫格组件，包含上图下文和左图右文两种样式。可配置图片、主标题文案、副标题文案。适用于信息展示，并可放置在页面的任何位置。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
list |
Array |
是 |
[] |
宫格数据，示例 |
|
type |
String |
否 |
vertical |
样式类型 vertical 上图下文、horizontal 左图右文 |
|
columnNum |
Number |
否 |
2 |
宫格展示列数，最少支持两列，上图下文最多支持 4 列，左图右文最多支持 3 列 |
|
imgBorderRadius |
Number |
否 |
3 |
图片圆角，默认 3，单位 rpx |
|
hasBorder |
Boolean |
否 |
true |
行与行之间的下边框 |
|
disable |
Boolean |
否 |
false |
是否有点击态 |
|
imageBorder |
Boolean |
否 |
false |
图片是否有 1px 描边 |
|
hasSeparateLine |
Boolean |
否 |
true |
宫格每一项之间的束分割线 |
|
smt-item-class |
String |
否 |
提供宫格扩展样式类，供开发者自定义组件样式，可通过此 class 改变单个宫格外部样式 |
|
|
smt-title-class |
String |
否 |
提供宫格扩展样式类，供开发者自定义组件样式，可通过此 class 改变单个宫格主标题样式 |
|
|
smt-sub-title-class |
String |
否 |
提供宫格扩展样式类，供开发者自定义组件样式，可通过此 class 改变单个宫格副标题样式 |
|
|
bind:clickhld |
EventHandle |
点击事件，事件详情为点击项展示数据 |
示例
代码示例
<!-- 默认 -->
<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"
}
}