简单好用的宫格组件 Grid

更新记录

1.9.1103（2026-11-03）下载此版本

border 在 gutter 模式下生效：边框画在 content 上，每张卡片完整一圈描边并跟随 radius 圆角；非 gutter 模式保持原有表格线风格不变
边框颜色改为内联 border-color 直接下发到 item 与 content（不走 CSS 变量，避免部分端 var() 在 border 简写中解析失效导致整条边框失效）；bdcolor 在两种模式下均可自定义边框色
gutter+border 模式下 content 补 box-sizing:border-box，避免边框撑破 100% 尺寸

1.9.1029（2026-10-29）下载此版本

兼容 Vue3（Vite）：移除 props default 中的 require() 写法，默认占位图改用 /uni_modules/o-grid/static/ 规范路径
grid-item 不再在 created 中一次性拷贝父组件配置，改为 computed 响应式读取注入的 grid 实例，col/bg/color 等动态变更即时生效
列数保持钳制 2~5（移动端场景），宽度/高度改为内联 calc 按钳制值精确计算
边框 nth-child 选择器依赖 MP virtualHost + styleIsolation:shared；无 virtualHost 的小程序端（阿里/百度/字节/QQ）降级为全边框+负 margin 合并
grid-item 新增 bg / color / radius / direction 属性，可单独覆盖 grid 的同名配置
布尔属性归一化（toBool）：统一处理 true/false/''/'true'/'false'，修复 border="" 与 gutter="" 行为不一致
修复 grid 的 titlecolor watch 监听不存在的 tit 导致变色不生效的问题，改为 computed
badge 支持超过 99 显示为 99+，修复 badge 为 0 时不渲染角标背景的问题
图标尺寸三档统一且不随列数变化: sm 66/64, md 76/72, lg 86/80 (rpx, 图/字)；按列数分档仅保留内边距差异
声明 emits: ['click']，click 事件透传原始事件对象；公共工具函数抽离至 libs/utils.js

1.8.0602（2025-06-02）下载此版本

更新scss，调整为 dart-sass 支持的语法

平台兼容性

uni-app(4.45)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	√	-	√	√	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	-	√	√	√	-	-

uni-app x(4.45)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

说明

比Uni官方版好用的宫格组件，包含grid、grid-item两个组件，当前为uni_modules版本

特性

常用的移动端页面宫格组件
支持角标红点和数字（超过 99 自动显示 99+）
图标支持图片和字体，自动识别
列数钳制 2~5（移动端场景），超出自动归档
grid-item 支持 bg/color/radius/direction 单独覆盖 grid 配置
border 与 gutter 互相独立：无 gutter 为表格线，开 gutter 为卡片描边，bdcolor 可自定义线色
兼容 Vue2/Vue3，兼容 APP、H5 及各大平台小程序

边框说明

border 不再依赖 gutter，两种组合呈现不同风格：

组合	风格	表现
`border`	表格线	item 只画 bottom + right，首行补 top、每行首列补 left，外边缘一圈不画
`border` + `gutter`	卡片描边	每张卡片完整一圈描边，画在内容容器上，自动跟随 `radius` 圆角，卡片之间互不相连

<!-- 表格线：宫格之间共用一条线 -->
<o-grid border col="4" title="表格线">
    <o-grid-item text="宫格标题" />
</o-grid>

<!-- 卡片描边：配合 gutter + radius，每张卡片独立成块 -->
<o-grid border gutter radius col="4" bg="#fcc" bdcolor="#f90" title="卡片描边">
    <o-grid-item text="宫格标题" />
</o-grid>

默认线色 #F1F1F1 配 1rpx 在卡片场景下偏淡，卡片描边建议显式传 bdcolor。

使用方法

在 template 中使用组件

<template>
    <view>
        <o-grid border col="8" radius title="组标题" bg="bg-white" bdcolor="#f90">
            <o-grid-item text="宫格标题1" icon="http://www.oveui.com/wp-content/uploads/2022/02/oveui_Logo_128.png" />
            <o-grid-item text="宫格标题2" icon="https://ask.dcloud.net.cn/uploads/avatar/001/15/59/86_avatar_max.jpg" />
            <o-grid-item text="宫格标题3" dot icon="http://www.oveui.com/wp-content/themes/dux7.6/img/thumbnail.png" />
            <o-grid-item text="跳回首页" @click="url('../index/index','tabbar')" badge='990' />
            <o-grid-item text="图标页面" @click="url('../index/icon','tabbar')" />
            <o-grid-item text="宫格标题6" mode="aspectFill" icon="http://www.oveui.com/wp-content/uploads/2022/04/b85f393c7b0415b5547e3c7ddce8b6a4-220x150.jpg" />
            <o-grid-item text="宫格标题7" />
            <o-grid-item text="宫格标题8" />
        </o-grid>
        <o-grid title="小图标模式" titlecolor="#f60" size="sm" border>
            <o-grid-item text="宫格标题2" dot />
            <o-grid-item text="宫格标题3" badge='99' />
            <o-grid-item text="宫格标题4" />
        </o-grid>
        <o-grid title="中图标模式（默认）" titlecolor="#f60" size="md" border>
            <o-grid-item text="宫格标题1" />
            <o-grid-item text="宫格标题2" dot />
            <o-grid-item text="宫格标题3" badge='99' />
        </o-grid>
        <o-grid title="大图标模式" titlecolor="#f60" size="lg" border>
            <o-grid-item text="宫格标题2" dot />
            <o-grid-item text="宫格标题1" />
            <o-grid-item text="查看更多">自定义内容<br>查看更多</o-grid-item>
        </o-grid>
        <o-grid border col="4" radius gutter bg="#fcc" color="#c00" title="间隔+自定义底色和文字颜色">
            <o-grid-item text="宫格标题" icon="http://www.oveui.com/wp-content/uploads/2022/02/oveui_Logo_128.png" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='99' />
            <o-grid-item text="宫格标题" />
        </o-grid>
        <o-grid col="4" radius square title="展示无底色、自定义内容">
            <o-grid-item text="宫格标题">
                自定义<br>内容
            </o-grid-item>
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='99' />
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='9' />
        </o-grid>
        <o-grid border col="3" square radius gutter title="正方形模式">
            <o-grid-item text="宫格标题" icon="http://www.oveui.com/wp-content/uploads/2022/02/oveui_Logo_128.png" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='99' />
            <o-grid-item text="宫格标题" icon="https://ask.dcloud.net.cn/uploads/avatar/001/15/59/86_avatar_max.jpg" />
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" badge='9' />
        </o-grid>
        <o-grid border col="4" square title="正方形+边框">
            <o-grid-item text="宫格标题" icon="http://www.oveui.com/wp-content/uploads/2022/02/oveui_Logo_128.png" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='19' />
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
        </o-grid>
        <o-grid border radius title="左右排风格" direction="row" col="2" color="text-blue">
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='99' />
            <o-grid-item text="宫格标题" dot />
        </o-grid>
        <o-grid border radius title="两排风格" col="2" color="text-blue">
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='99' />
            <o-grid-item text="宫格标题" dot />
        </o-grid>
        <o-grid border radius title="左右3排风格" 
        direction="row" col="3" color="text-blue">
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" badge='19' />
            <o-grid-item text="宫格标题" dot />
            <o-grid-item text="宫格标题" />
            <o-grid-item text="宫格标题" dot />
        </o-grid>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        methods: {
            url(path, type) {
                const url = path.replace(/^\.\.\//, '/pages/').replace(/^\.\//, '/pages/grid/');
                if (type === 'tabbar') {
                    uni.switchTab({ url, fail: () => uni.navigateTo({ url }) });
                } else {
                    uni.navigateTo({ url });
                }
            }
        }
    }
</script>

API

oGrid Props

属性名	类型	默认值	可选值	说明
col	Number,String	3	2~5	列，<2 按 2 列，>5 按 5 列（移动端场景钳制）
title	String	-		Grid组标题
titlecolor	String	#333		Grid组标题颜色，支持class和style模式
border	Number,String	false	true,0	显示边框线。非 gutter 模式为表格线风格；gutter 模式为卡片描边（完整一圈，跟随 radius 圆角）
bdcolor	String	#f1f1f1	#f00、rgb()、rgba()、transparent	边框线颜色，表格线与卡片描边均生效，支持style模式
size	String	md	sm、md、lg	图标尺寸三档统一: sm 66/64, md 76/72, lg 86/80 (rpx, 图/字)
bg	String	bg-white		设置宫格背景，支持class和style模式
color	String	#444		宫格文字颜色，支持class和style模式
square	Boolean,String	false	false、true	宫格正方模式
gutter	Boolean,String	false	false、true	宫格间隔 20rpx固定值
radius	Boolean,String	false	false、true	卡片内容圆角，gutter模式下有效；与 border 同开时描边自动跟随圆角
direction	Boolean,String	row	row、col	开启宫格内容排列的方向 row:上下排，col:左右排

oGridItem Props

属性名	类型	默认值	可选值	说明
text	String	-	-	文字
icon	String	占位图	-	图标，支持图片和字体，自动识别；留空显示默认占位图
hoverClass	String	-	-	点击时的样式类
dot	Boolean	-	-	红点角标
badge	Number,String	-	-	数字角标，超过 99 显示 99+
mode	String	aspectFit		icon为图片时的mode属性
bg	String	-	-	覆盖 grid 的背景色，留空继承 grid
color	String	-	-	覆盖 grid 的文字颜色，留空继承 grid
radius	Boolean,String	-	-	覆盖 grid 的圆角配置，留空继承 grid
direction	String	-	-	覆盖 grid 的排列方向，留空继承 grid

oGridItem Events

事件名称	说明	返回参数
@click	监听GridItem点击事件	-

GridItem Slots

名称	说明
default	GridItem自定义内容插槽

简单好用的宫格组件 Grid Grid 宫格组件 九宫格

更新记录

1.9.1103（2026-11-03）下载此版本

1.9.1029（2026-10-29）下载此版本

1.8.0602（2025-06-02）下载此版本

平台兼容性

uni-app(4.45)

uni-app x(4.45)

说明

特性

边框说明

使用方法

API

oGrid Props

oGridItem Props

oGridItem Events

GridItem Slots

隐私、权限声明

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

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

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

许可协议

MIT协议

o-empty 暂无数据缺省页空白数据占位提示组件

简单内容分割线组件 Divider

简单美化的按钮 button

简单好用的栅格布局组件(Row、Col)

简单好用的宫格组件 Grid Grid 宫格组件 九宫格

更新记录

1.9.1103（2026-11-03） 下载此版本

1.9.1029（2026-10-29） 下载此版本

1.8.0602（2025-06-02） 下载此版本

平台兼容性

uni-app(4.45)

uni-app x(4.45)

说明

特性

边框说明

使用方法

API

oGrid Props

oGridItem Props

oGridItem Events

GridItem Slots

隐私、权限声明

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

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

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

许可协议

MIT协议

o-empty 暂无数据 缺省页 空白数据 占位提示组件

简单好用的宫格组件 Grid

简单内容分割线组件 Divider

简单美化的按钮 button

简单好用的栅格布局组件(Row、Col)

Modal title

简单好用的宫格组件 Grid Grid 宫格组件九宫格

1.9.1103（2026-11-03）下载此版本

1.9.1029（2026-10-29）下载此版本

1.8.0602（2025-06-02）下载此版本

o-empty 暂无数据缺省页空白数据占位提示组件