创新互联百度小程序教程：grid宫格

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

grid 宫格

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

创新互联公司专业成都网站设计、网站建设，集网站策划、网站设计、网站制作于一体，网站seo、网站优化、网站营销、软文发稿等专业人才根据搜索规律编程设计，让网站在运行后，在搜索中有好的表现，专业设计制作为您带来效益的网站！让网站建设为您创造效益。

属性说明

属性名	类型	必填	默认值	说明
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

 
 
 
  
  
  
  
  
  

  
  
   bind:clickhld="clickHld"
  
  
   list="{{list}}"
  
  
  >
  
  
  
  
  
  

  
  
   bind:clickhld="clickHld"
  
  
   item-class="item"
  
  
   title-class="title"
  
  
   sub-title-class="sub-title"
  
  
   list="{{list}}"
  
  
   column-num="{{3}}"
  
  
  >
  
  
  
  
  
  

  
  
   type="horizontal"
  
  
   bind:clickhld="clickHld"
  
  
   item-class="item"
  
  
   title-class="title"
  
  
   list="{{horizontalList}}"
  
  
   column-num="{{3}}"
  
  
  >

            

            标题名称：创新互联百度小程序教程：grid宫格            

            文章地址：http://cdysf.com/article/cdcocsj.html

NEWS

网站建设资讯

创新互联百度小程序教程：grid宫格

grid 宫格

属性说明

示例

代码示例

其他资讯