Grid 宫格

宫格。

扫码体验：
Grid 宫格 - 图1

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

示例

  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. });

原文: https://docs.alipay.com/mini/component-ext/grid