宫格。
| 属性名 | 描述 | 类型 | 默认值 | 必选 |
| 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 |
{
"defaultTitle": "应用AntUI组件库",
"usingComponents": {
"grid": "mini-antui/es/grid/index"
}
}
<grid onGridItemClick="onItemClick" columnNum="{{3}}" list="{{list3}}" />
Page({
data: {
list3: [
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
desc: '描述信息',
},
],
},
onItemClick(ev) {
my.alert({
content: ev.detail.index,
});
},
});
