更新记录

1.6.0722（2023-07-19）

• 优化图标为空值时的识别度，以方便输出默认图片

1.6.0721（2023-07-19）

• 调整优化自定义内容时宫格样式
• 补充默认图片

1.6.0720（2023-07-19）

• 调整优化自定义内容时宫格样式

平台兼容性

说明

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

特性

• 常用的移动端页面宫格组件
• 支持角标红点和数字
• 图标 支持图片和字体，自动识别
• 兼容APP、H5及微信小程序

使用方法

在 template 中使用组件

<template>
    <view>
        <o-grid border col="8" radius title="组标题" bg="bg-white">
            <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='99' />
            <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" radius gutter bg="bg-white">
            <o-grid-item text="宫格标题1" />
            <o-grid-item text="宫格标题2" />
            <o-grid-item text="宫格标题3" dot />
            <o-grid-item text="宫格标题4" badge='99' />
            <o-grid-item text="宫格标题5" />
            <o-grid-item text="宫格标题6" />
            <o-grid-item text="宫格标题7" />
            <o-grid-item text="宫格标题8" />
        </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 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(url,type){
                if(type=='tabbar'){ //跳转到tabbar页
                    uni.switchTab({ url:url });
                    console.log('点了tabbar');
                } else if(type=='back'){
                    uni.navigateBack({ delta:1 });
                } else { //非tabbar页跳转
                    if (!url) { console.log('没填写路径!') }
                    else {
                        uni.navigateTo({ url:url});
                        console.log('点了:',url);
                    }
                }
            }
        }
    }
</script>

API

oGrid Props

oGridItem Props

oGridItem Events

GridItem Slots