支付宝小程序扩展组件 宫格·Grid
按照不同的业务场景，可选择不同列数的宫格，包含了 2、3、4、5 列四种列数的宫格。
扫码体验
示例代码
{
"defaultTitle": "Grid",
"usingComponents":{
"grid":"mini-ali-ui/es/grid/index",
"pagination": "mini-ali-ui/es/pagination/index"
}
}
<grid
onGridItemClick="onItemClick"
columnNum="{{5}}" list="{{list55}}"
infinite="{{true}}"
gridName="newGridName"
circular="{{true}}"
infiniteHeight="240rpx"
/>
Page({
data: {
list55: [
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '6标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
{
icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
text: '标题文字',
},
],
},
onItemClick(ev) {
my.alert({
content: ev.detail.index,
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 | 必填 | 最低版本 |
|---|---|---|---|---|---|
| columnNum | Number | 3 | 设置宫格的列数。可选值：2、3、4、5. | true | - |
| circular | Boolean | false | item 图是否为圆形。 | - | - |
| list | Array | - | 宫格数据。 | true | - |
| onGridItemClick | EventHandle | (index: Number) => void | 点击宫格项回调。 | - | - |
| hasLine | Boolean | true | 3 列宫格时才有的间隔线。 | - | - |
| infinite | Boolean | false | 5 列宫格时是否为无限滚动模式。 | - | - |
| multiLine | Boolean | false | 5 列宫格时是否以多行形式展示 | - | 1.1.0 |
| infiniteHeight | String | 90px | 无限滚动模式时的宫格整体高度。 | - | - |
| gridName | String | - | 无限滚动宫格的名称。 | - | - |
Bug & Tip
hasLine仅在 3 列宫格中才有效果；circular圆角仅在 4/5 列宫格中才有效果；infinite无限滚动模式的宫格仅在 5 列宫格，且列数超过 5 条之后才会有效果；multiLine为 true 时，且未设置infinite的话，宫格最终会以 5 列多行的形式展示数据；- 如在一个页面中有多个无限滚动的 5 列宫格，建议增加使用
gridName属性，避免分页符表现错误； - 当使用 5 列的无限滚动时，需要同时引入 pagination 组件。