全部产品

宫格(grid)

本文介绍宫格(grid)。

属性名 类型 默认值 描述 必选
list Array<icon, text> [] 宫格数据。 true
onGridItemClick (index: Number) => void - 点击宫格项回调。 false
columnNum 2345 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. });