支付寶小程序擴展組件 宮格·Grid

按照不同的業(yè)務(wù)場景，可選擇不同列數(shù)的宮格，包含了 2、3、4、5 列四種列數(shù)的宮格。

掃碼體驗

示例代碼

{
 "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: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '6標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
     {
       icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
       text: '標(biāo)題文字',
     },
   ],
 },
 onItemClick(ev) {
   my.alert({
     content: ev.detail.index,
   });
 },
});

屬性

Bug & Tip

• hasLine 僅在 3 列宮格中才有效果；
• circular 圓角僅在 4/5 列宮格中才有效果；
• infinite 無限滾動模式的宮格僅在 5 列宮格，且列數(shù)超過 5 條之后才會有效果；
• multiLine 為 true 時，且未設(shè)置 infinite 的話，宮格最終會以 5 列多行的形式展示數(shù)據(jù)；
• 如在一個頁面中有多個無限滾動的 5 列宮格，建議增加使用 gridName 屬性，避免分頁符表現(xiàn)錯誤；
• 當(dāng)使用 5 列的無限滾動時，需要同時引入 pagination 組件。