更新记录

1.0.3（2025-05-14） 下载此版本

支持守卫

1.0.2（2025-05-13） 下载此版本

守卫

1.0.1（2025-05-08） 下载此版本

更新文档。

平台兼容性

uni-app

其他

方便您的同时，请五星、收藏，让好的东西照亮更多深渊中负重前行的代码人。

创作不易，在您方便之际，赞赏作者，我们会更有动力继续下去。

简介

ljs-bottom-menu-vue3，通用底部菜单组件。提供传统、通用的功能，特殊的菜单需自行构建。

使用 uni_modules 安装（推荐）

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 ljs-bottom-menu-vue3组件。

主参数

data 对象数据结构

opts参数

插槽

前置守卫

// 全局前置守卫
uni.$on('routerBeforeEach', (to, from, next) => {
    console.log(to, from, next);
    next()
    // next('/pages/login/index')
});

参数to/from

参数next，next为函数(path, parameter)

快速应用

示例1

<ljs-bottom-menu-vue3
    :data="menus"
    :opts="{
        fontColor: '#666',
        fontActiveColor: '#1296db',
    }"
    :specialButtonF="specialButtonF">
</ljs-bottom-menu-vue3>

import index from '/static/images/index.png';
import index_active from '/static/images/index_active.png';
import publish from '/static/images/publish.png';
import publish_active from '/static/images/publish_active.png';
import my from '/static/images/my.png';
import my_active from '/static/images/my_active.png';
import sm from '/static/images/sm.png';
export default {
    data() {
        return {
            menus: [
                {
                    title: '首页',
                    url: '/pages/ljs-bottom-menu-vue3/index',
                    icon: index,
                    iconActive: index_active
                },
                {
                    title: '新闻',
                    icon: publish,
                    iconActive: publish_active,
                    parameter: {
                        id: undefined
                    },
                    children: [
                        {
                            title: '最新新闻',
                            url: '/pages/my/index',
                        },
                        {
                            title: '历史新闻',
                            url: '/pages/publish/index',
                        }
                    ]
                },
                {
                    title: '扫码',
                    url: '/pages/publish/index',
                    icon: sm,
                    type: 0,
                },
                {
                    title: '发布',
                    icon: publish,
                    iconActive: publish_active,
                    parameter: {
                        id: undefined
                    },
                    children: [
                        {
                            title: '产品发布',
                            url: '/pages/my/index',
                        },
                        {
                            title: '技术发布',
                            url: '/pages/my/index',
                        }
                    ]
                },
                {
                    title: '我的',
                    url: '/pages/my/index',
                    icon: my,
                    iconActive: my_active
                },
            ]
        }
    }
}

贡献代码

龙九山。有任何问题，请在平台留言，在手头宽裕得情况下，我会尽快修复问题。