后浪云百度小程序教程：grid 宫格

2023-9-24

grid 宫格
- 属性说明
- 示例
  - 代码示例

grid 宫格

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

属性说明

属性名	类型	必填	默认值	说明
list	Array	是		宫格数据，示例 `[{imageSrc: ‘图片地址’, title: ‘最多展示六个字主标题’, subTitle: ‘副标题文案’}]` 左图右文不支持显示副标题，详细请阅读代码示例
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-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>

作者：后浪云

链接：https://www.idc.net/help/186013/

文章版权归作者所有，未经允许请勿转载。

THE END