- grid 宫格
- 属性说明
- 示例
- 代码示例
- 代码示例
grid 宫格
解释：宫格组件，包含上图下文和左图右文两种样式。可配置图片、主标题文案、副标题文案。适用于信息展示，并可放置在页面的任何位置。
属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
list | Array | 是 | 宫格数据，示例 | |
type | String | 否 | vertical | 样式类型 vertical 上图下文、horizontal 左图右文 |
columnNum | Number | 否 | 2 | 宫格展示列数，最少支持两列，上图下文最多支持 4 列，左图右文最多支持 3 列 |
imgBorderRadius | Number | 否 | 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 | 否 | 点击事件，事件详情为点击项展示数据 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
- SWAN
- JS
- CSS
- JSON
<!-- 默认 --><smt-gridbind:clickhld="clickHld"list="{{list}}"></smt-grid><!-- 三列 + 上图下文 --><smt-gridbind:clickhld="clickHld"item-class="item"title-class="title"sub-title-class="sub-title"list="{{list}}"column-num="{{3}}"></smt-grid><!-- 三列 + 左图右文 --><smt-gridtype="horizontal"bind:clickhld="clickHld"item-class="item"title-class="title"list="{{horizontalList}}"column-num="{{3}}"></smt-grid>