更新记录

1.4.0102（2022-01-02）

• 修复 微信小程序兼容问题 本次参考官方风格，采用虚拟自定义节点，优化代码结构，优化参数方法

1.3.1028（2021-10-28）

• 更新 同步uni_modules更新版本
• 调整 与uni_modules版一致，组件名：o-grid、o-grid-item 代码块：oGrid、oGridItem
• 增加 间隔模式，间距固定
• 增加 圆角，间隔模式下有效
• 优化 移除点击事件预设方法，按需调用方法更合理
• 更新 换了一组内置字体图标，约340个，收集自iconfont官网
• 移除 因不常用、不兼容小程序，移除order排序

1.2.0316（2021-03-16）

1、对大家反馈升级HBuilderX后点击事件无效的问题进行修复和优化，当前在3.1.4版本下测试正常，还有问题请看示例或者留言反馈。 2、对col为空时默认状态进行了优化，默认为3栏。

平台兼容性

说明

简单好用的宫格组件套，包含grid、grid-item两个组件，官方推荐使用unimodules版本 ^^

特性

• 常用的移动端页面宫格组件
• 支持角标红点和数字
• 支持图片和字体图标，自动识别，
• 内置从iconfont收集来的300多个图标
• 兼容APP、H5及微信小程序
• QQ交流群 1136131487

使用方法

在 template 中使用组件

<template>
    <view>

        <o-grid col="4" title="4列/其他参数默认">
            <o-grid-item text="普通跳转" dot icon="/static/logo.png" @click="goTo('../test/test')" />
            <o-grid-item text="图标列表" icon="icon-viewlist" @click="goTo('../tabbar/tabbar','tabbar')" />
            <o-grid-item text="普通跳转" dot icon="/static/logo.png" @click="goTo('../test/test')" />
            <o-grid-item text="图标列表" icon="icon-camera" @click="goTo('../tabbar/tabbar','tabbar')" />
            <o-grid-item text="普通跳转" icon="icon-feeds" @click="goTo('../test/test')" />
            <o-grid-item text="普通跳转" icon="icon-service" @click="goTo('../test/test')" />
            <o-grid-item text="普通跳转" icon="icon-feeds" @click="goTo('../test/test')" />
            <o-grid-item text="普通跳转" icon="icon-service" @click="goTo('../test/test')" />
        </o-grid>

        <o-grid col="4" border="0" square title="正方/无边/小图标" iconSize="sm">
            <o-grid-item text="内容标题" icon="icon-help1"></o-grid-item>
            <o-grid-item text="内容标题" badge="99+" icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" dot icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" icon="icon-help"></o-grid-item>
        </o-grid>

        <o-grid col="5" square title="5列/正方/小图标" iconSize="sm">
            <o-grid-item text="内容标题" icon="icon-help1"></o-grid-item>
            <o-grid-item text="内容标题" badge="99+" icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" dot icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" icon="icon-help"></o-grid-item>
            <o-grid-item text="内容标题" icon="/static/logo.png"></o-grid-item>
        </o-grid>

        <o-grid col="2" gutter radius title="两列/间隔/圆角">
            <o-grid-item text="内容标题" icon="icon-Newuserzone-fill"></o-grid-item>
            <o-grid-item text="内容标题" badge="99+" icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" dot icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" icon="icon-product-fill"></o-grid-item>
        </o-grid>

        <o-grid gutter title="间隔/其他默认">
            <o-grid-item text="内容标题" badge="99+" icon="/static/logo.png" />
            <o-grid-item text="内容标题" icon="icon-brand-fill" />
            <o-grid-item text="内容标题" dot icon="/static/logo.png" />
        </o-grid>

        <o-grid col="4" gutter square title="4列/间隔/方正">
            <o-grid-item text="内容标题" icon="icon-filter"></o-grid-item>
            <o-grid-item text="内容标题" badge="99+" icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" dot icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" icon="icon-block"></o-grid-item>
            <o-grid-item text="内容标题" icon="/static/logo.png"></o-grid-item>
            <o-grid-item text="内容标题" icon="/static/logo.png"></o-grid-item>
        </o-grid>

        <o-grid col="5" gutter square radius title="间隔/圆角/正方/大图标" iconSize="sm">
            <o-grid-item text="内容标题1" icon="icon-pcm" @click="goTo('../test/test')" />
            <o-grid-item text="tabbar" icon="icon-clock" @click="goTo('../tabbar/tabbar','tabbar')" />
            <o-grid-item text="跳转" dot icon="icon-color" @click="goTo('../test/test')" />
            <o-grid-item text="内容标题" icon="icon-jpge-fill"></o-grid-item>
            <o-grid-item text="内容标题" icon="/static/logo.png"></o-grid-item>
        </o-grid>

    </view>
</template>

<script>

    export default {
        data() {
            return { }
        },
        methods: {
            goTo(url,type){
                switch (type) {
                    case 'tabbar':{ //跳转到tabbar页
                        uni.switchTab({ url:url })
                        break;
                    }
                    case 'back':{ //返回上一页，只有当前为非tabbar页起作用
                        uni.navigateBack({ delta:1 });
                        break;
                    }
                    case 'modal':{ //弹出对话框
                        uni.showModal({
                            title:url,
                            content:'test'
                        });
                        break;
                    }
                    case 'toast':{ //弹出提示框
                        uni.showToast({
                            icon:'none',
                            title:url
                        });
                        break;
                    }
                    default:{ //非tabbar页跳转
                        if (!url) { console.log('没填写路径!') }
                        else {
                            uni.navigateTo({ url:url});
                            console.log('点了')
                        }
                    }
                }
            }
        }
    }
</script>

API

o-grid Props

o-grid-item Props