支付宝小程序扩展组件 宫格·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,
   });
 },
});

属性

Bug & Tip

• hasLine 仅在 3 列宫格中才有效果；
• circular 圆角仅在 4/5 列宫格中才有效果；
• infinite 无限滚动模式的宫格仅在 5 列宫格，且列数超过 5 条之后才会有效果；
• multiLine 为 true 时，且未设置 infinite 的话，宫格最终会以 5 列多行的形式展示数据；
• 如在一个页面中有多个无限滚动的 5 列宫格，建议增加使用 gridName 属性，避免分页符表现错误；
• 当使用 5 列的无限滚动时，需要同时引入 pagination 组件。