更新记录

1.0.0（2025-07-16） 下载此版本

• 宫格/列表菜单组件1.0.0版本发布

平台兼容性

云端兼容性

uni-app(4.06)

其他

ziqirj-nav-menu 宫格/列表菜单组件

• 组件名：ziqirj-nav-menu
• 代码块： NavigationMenu
• 关联组件：scss/sass

插件说明

• 1、集成宫格/列表菜单组件
• 2、区分类型显示
• 3、可显示角标数量

使用说明

组件参数

list 数据参数说明

{
    title: '标题', icon: '图标url', 
    router: '跳转路由', tabBar: Boolean值是否是导航页, 
    count: 角标展示数字, show: Boolean值是否显示
}

使用示例

<template>
    <ziqirj-page-view title="宫格/列表导航" topInterval="1px">
        <uni-section title="宫格导航" type="line">
            <ziqirj-nav-menu :list="menuList" :round-icon="false" show-mode="cell" :line-numbers="4" @clickCallback="clickCallback" />
        </uni-section>

        <uni-section title="列表导航" type="line">
            <ziqirj-nav-menu :list="menuList" :round-icon="true" show-mode="row" @clickCallback="clickCallback" />
        </uni-section>
    </ziqirj-page-view>
</template>

<script>
    export default {
        data() {
            return {
                menuList: [
                    {title: '首页', router: '/pages/index/index', tabBar: false, icon: 'https://icon.jjzqkj.cn/fileIcon/app.png', count: 0, show: true},
                    {title: '失败路由', router: '/pages/index/index1', tabBar: false, icon: 'https://icon.jjzqkj.cn/fileIcon/audio.png', count: 10, show: true},
                    {title: 'Menu3', icon: 'https://icon.jjzqkj.cn/fileIcon/database.png', count: 0, show: true},
                    {title: 'Menu4', icon: 'https://icon.jjzqkj.cn/fileIcon/excel.png', count: 0, show: true},
                    {title: 'Menu5', icon: 'https://icon.jjzqkj.cn/fileIcon/flash.png', count: 0, show: true},
                    {title: 'Menu6', icon: 'https://icon.jjzqkj.cn/fileIcon/image.png', count: 100, show: true},
                    {title: 'Menu7', icon: 'https://icon.jjzqkj.cn/fileIcon/pdf.png', count: 0, show: true},
                    {title: 'Menu8', icon: 'https://icon.jjzqkj.cn/fileIcon/ppt.png', count: 100, show: true},
                    {title: 'Menu9', icon: 'https://icon.jjzqkj.cn/fileIcon/system.png', count: 0, show: true},
                    {title: 'Menu10', icon: 'https://icon.jjzqkj.cn/fileIcon/video.png', count: 0, show: true}
                ]
            }
        },
        methods: {
            clickCallback(e) {
                console.log("clickCallback", e)
                uni.showToast({
                    title: '未配置路由！',
                    icon: 'error'
                })
            }
        }
    }
</script>

<style>

</style>

效果图

H5	微信小程序

依赖组件

scss/sass

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿