< 文档首页
全部产品
弹性计算
存储服务
数据库
网络
视频与CDN
域名与网站
应用服务
工商财税 知识产权
互联网中间件
移动研发平台 EMAS
移动研发平台EMAS-专有云
云通信
安全
大数据
人工智能
ET大脑
物联网
物联网行业方案
数字金融
管理与监控
区块链
云市场
API与工具
解决方案
钉钉
会员服务
专有云
更多
云游戏

    宫格（grid）

    更新时间：2020-03-26 11:53:26

    ★ 我的收藏
    本页目录

    本文介绍宫格（（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

    代码示例

    1. {
    2.   "defaultTitle": "小程序AntUI组件库",
    3.   "usingComponents": {
    4.     "grid": "mini-antui/es/grid/index"
    5.   }
    6. }
    1. <grid onGridItemClick="onItemClick" columnNum="{{3}}" list="{{list3}}" />
    1. Page({
    2.   data: {
    3.     list3: [
    4.       {
    5.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    6.         text: '标题文字',
    7.         desc: '描述信息',
    8.       },
    9.       {
    10.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    11.         text: '标题文字',
    12.         desc: '描述信息',
    13.       },
    14.       {
    15.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    16.         text: '标题文字',
    17.         desc: '描述信息',
    18.       },
    19.       {
    20.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    21.         text: '标题文字',
    22.         desc: '描述信息',
    23.       },
    24.       {
    25.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    26.         text: '标题文字',
    27.         desc: '描述信息',
    28.       },
    29.       {
    30.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    31.         text: '标题文字',
    32.         desc: '描述信息',
    33.       },
    34.       {
    35.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    36.         text: '标题文字',
    37.         desc: '描述信息',
    38.       },
    39.       {
    40.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    41.         text: '标题文字',
    42.         desc: '描述信息',
    43.       },
    44.       {
    45.         icon: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    46.         text: '标题文字',
    47.         desc: '描述信息',
    48.       },
    49.     ],
    50.   },
    51.   onItemClick(ev) {
    52.     my.alert({
    53.       content: ev.detail.index,
    54.     });
    55.   },
    56. });
    上一篇：卡片（card）
    下一篇：步骤条（steps）
    相关文档
    相关产品
    • 移动开发平台mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 移动研发平台 EMAS
      移动研发平台（Enterprise Mobile Application Studio，简称EMAS），面向企业服务市场，期望把阿里巴巴近十年在移动互联网行业沉淀的DevOps研发支撑能力、移动App基础中间件能力开放给客户，帮助传统企业快速实现移动数字化的转型目标。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。