×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：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扫码

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
    3. 
  
  
  
  3.  bind:clickhld="clickHld"
    4. 
  
  
  
  4.  list="{{list}}"
    5. 
  
  
  
  5. >
    6. 
  
  
  
    7. 
  
  
  
    8. 
  
  
  
  8.  bind:clickhld="clickHld"
    9. 
  
  
  
  9.  item-class="item"
    10. 
  
  
  
  10.  title-class="title"
    11. 
  
  
  
  11.  sub-title-class="sub-title"
    12. 
  
  
  
  12.  list="{{list}}"
    13. 
  
  
  
  13.  column-num="{{3}}"
    14. 
  
  
  
  14. >
    15. 
  
  
  
    16. 
  
  
  
    17. 
  
  
  
  17.  type="horizontal"
    18. 
  
  
  
  18.  bind:clickhld="clickHld"
    19. 
  
  
  
  19.  item-class="item"
    20. 
  
  
  
  20.  title-class="title"
    21. 
  
  
  
  21.  list="{{horizontalList}}"
    22. 
  
  
  
  22.  column-num="{{3}}"
    23. 
  
  
  
  23. >
    24.

分享题目：创新互联百度小程序教程：grid宫格
URL地址：http://cdbrznjsb.com/article/cdcocsj.html

其他资讯

  • 网站建设专属方案

  • 网站定制化设计

  • 7X24小时服务

  • N对管家服务

让你的专属顾问为你服务