更新记录

1.2.4(2021-05-12)

  • 新增 组件示例地址

1.2.3(2021-02-05)

  • 调整为uni_modules目录规范
查看更多

平台兼容性

app 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
app-vue app-nvue ×
h5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox pc-Safari

Grid 宫格

组件名:uni-grid 代码块: uGrid

宫格组件。

安装方式

本组件符合easycom规范,HBuilderX 2.5.5起,只需将本组件导入项目,在页面template中即可直接使用,无需在页面中import和注册components

如需通过npm方式使用uni-ui组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55

注意事项 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。

  • 删除组件自带圆点角标效果,完全交给用户实现,示例有简单角标效果实现
  • Grid 组件仅在自定义组件模式下支持
  • column 属性最大值最好不要超过 5 个,如果超过,需要注意内容显示
  • 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式,开启方式: 详情 --> 项目配置 --> 启用 component2 编译
  • 为了避免高度显示错误组件内必须要有内容

基本用法

template 中使用组件

<!-- 一般用法 -->
<uni-grid :column="3">
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
</uni-grid>

<!-- 不带边框并矩形显示 -->
<uni-grid :column="3" :showBorder="false"  :square="false">
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
    <uni-grid-item>
        <text class="text">文本</text>
    </uni-grid-item>
</uni-grid>

API

Grid Props

uni-grid 属性说明:

属性名 类型 默认值 说明
column Number 3 每列显示个数
borderColor String #d0dee5 边框颜色
showBorder Boolean true 是否显示边框
square Boolean true 是否方形显示
highlight Boolean true 点击背景是否高亮

Grid Events

事件名 说明 返回值
@change 点击 grid 触发 e={detail:{index:0}},index 为当前点击 gird 下标

GridItem Props

属性名 类型 默认值 说明
index Number - 子组件的唯一标识 ,点击gird会返回当前的标识

组件示例

点击查看:https://hellouniapp.dcloud.net.cn/pages/extUI/grid/grid

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问