更新时间:2020-03-26 11:53
本文介绍宫格((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 |
{
"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,
});
},
});
在文档使用中是否遇到以下问题
更多建议
匿名提交