全部产品
云市场
云游戏

宫格(grid)

更新时间:2020-03-26 11:53:26

本文介绍宫格((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. });