用前哔哔
目前这个组件只支持至多四个导航，ƪ(˘⌣˘)ʃ 毕竟元素大小是固定的，太小的话就不好看了(个人审美)，顺带一提，这几个图标都在组件内，由我家的gtx1065赛博画师花了好几分钟画出来的，有没有版权我不敢保证，毕竟ai绘画这个东西都是拼出来的很难说是不是原创，如果诸位想直接商用我没什么意见。(如果还想要其他的图标可以留言一下，回头我拜托赛博画师整整)

哔哔完毕
引入插件

js:

import NavigationBar from '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/happy-bottomnavigationbar.vue'
html

参数解释

参数名 类型 作用
listitem 数组 每个导航元素的图标、文字、大小
示例(这些图标在组件内都有，可以直接复制以下这段代码到使用处)

    const listitem = ref([{
            default_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/IMG_202309024745_gray.png',
            activity_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/tt1.png',
            title: '首页',
            width: '90rpx',
            height: '90rpx',
            isclick:true,  //这个选项为是否选中
        },
        {
            default_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/cc1 (2).png',
            activity_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/cc1 (1).png',
            title: '收藏',
            width: '50rpx',
            height: '50rpx',
            isclick:false,
        },
        {
            default_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/cc2 (2).png',
            activity_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/cc2 (1).png',
            title: '购物车',
            width: '60rpx',
            height: '60rpx',
            isclick:false,
        },
        {
            default_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/IMG_202309028723_gray.png',
            activity_icon: '../../uni_modules/happy-bottomnavigationbar/components/happy-bottomnavigationbar/images/49d40d2cd94a0e955a0b08e1f87441f83d9f91ae54e5a54c6c0ef136e1e461b4-removebg-preview (1).png',
            title: '个人中心',
            width: '100rpx',
            height: '100rpx',
            isclick:false,
        },
    ])
参数名 类型 作用
clickreturn 回调函数 会返回一个当前点击元素在listitem这个示例数组内的下标
示例

const clickreturn=(e)=>{
        console.log(e) //e是下标
    }
关于主题颜色
这个主题色不包括元素未点击时默认的灰色哟 ƪ(˘⌣˘)ʃ

步骤是进入到组件的主文件(在uni_modules目录下).vue文件的style标签
$theme_color:lightgreen;//把这一行改成契合你应用的颜色就行了