宫格（grid）

本文介绍宫格（grid）。

属性名 类型 默认值 描述 必选
list Array<icon, text> [] 宫格数据。 true
onGridItemClick (index: Number) => void - 点击宫格项回调。 false
columnNum 2、3、4、5 3 每行显示几列。 false
circular Boolean false 是否圆角。 false
hasLine Boolean true 是否有边框。 false

代码示例

  1. {
  2.   "defaultTitle": "小程序 AntUI 组件库",
  3.   "usingComponents": {
  4.     "grid": "mini-antui/es/grid/index"
  5.   }
  6. }
  1. <grid onGridItemClick="onItemClick" columnNum="{{3}}" list="{{list3}}" />
  1. Page({
  2.   data: {
  3.     list3: [
  4.       {
  5.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  6.         text: '标题文字',
  7.         desc: '描述信息',
  8.       },
  9.       {
  10.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  11.         text: '标题文字',
  12.         desc: '描述信息',
  13.       },
  14.       {
  15.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  16.         text: '标题文字',
  17.         desc: '描述信息',
  18.       },
  19.       {
  20.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  21.         text: '标题文字',
  22.         desc: '描述信息',
  23.       },
  24.       {
  25.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  26.         text: '标题文字',
  27.         desc: '描述信息',
  28.       },
  29.       {
  30.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  31.         text: '标题文字',
  32.         desc: '描述信息',
  33.       },
  34.       {
  35.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  36.         text: '标题文字',
  37.         desc: '描述信息',
  38.       },
  39.       {
  40.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  41.         text: '标题文字',
  42.         desc: '描述信息',
  43.       },
  44.       {
  45.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  46.         text: '标题文字',
  47.         desc: '描述信息',
  48.       },
  49.     ],
  50.   },
  51.   onItemClick(ev) {
  52.     my.alert({
  53.       content: ev.detail.index,
  54.     });
  55.   },
  56. });