• Grid 栅格布局
    • 使用指南
    • 一般用法
    • 矩形用法
    • AtGrid 参数

    Grid 栅格布局

    提供在移动端常见的 宫格 布局，帮助快速实现宫格效果

    使用指南

    在 Taro 文件中引入组件

    :::demo

    1. import { AtGrid } from 'taro-ui'

    :::

    一般用法

    :::demo

    1. <AtGrid data={
    2.   [
    3.     {
    4.       image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
    5.       value: '领取中心'
    6.     },
    7.     {
    8.       image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
    9.       value: '找折扣'
    10.     },
    11.     {
    12.       image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
    13.       value: '领会员'
    14.     },
    15.     {
    16.       image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
    17.       value: '新品首发'
    18.     },
    19.     {
    20.       image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
    21.       value: '领京豆'
    22.     },
    23.     {
    24.       image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
    25.       value: '手机馆'
    26.     }
    27.   ]
    28. } />

    :::

    矩形用法

    :::demo

    1. <AtGrid mode='rect' data={
    2.  [
    3.     {
    4.       image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
    5.       value: '领取中心'
    6.     },
    7.     {
    8.       image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
    9.       value: '找折扣'
    10.     },
    11.     {
    12.       image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
    13.       value: '领会员'
    14.     },
    15.     {
    16.       image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
    17.       value: '新品首发'
    18.     },
    19.     {
    20.       image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
    21.       value: '领京豆'
    22.     },
    23.     {
    24.       image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
    25.       value: '手机馆'
    26.     }
    27.   ]
    28. } />

    :::

    AtGrid 参数

    参数 说明 类型 可选值 默认值
    data 宫格布局数据源 [{‘{ icon? , value? , image? }’}] - -
    mode 元素的标题 String - -
    columnNum 每一列有多少个 Number - -
    onClick 点击宫格触发的事件 (item: object, index: number): void - false