更新记录

1.0.2（2023-09-04） 下载此版本

修复了页面切换时动画显示不正确的bug

1.0.1（2023-09-03） 下载此版本

解决了跳转页面会闪的问题

1.0.0（2023-09-02） 下载此版本

功能实装

平台兼容性

用前哔哔

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

哔哔完毕

引入插件

js:

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

html

<NavigationBar :listitem="listitem" @clickindex="clickreturn"></NavigationBar>

参数解释

示例(这些图标在组件内都有，可以直接复制以下这段代码到使用处)

    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,
        },
    ])

示例

const clickreturn=(e)=>{
        console.log(e) //e是下标
    }

关于主题颜色

这个主题色不包括元素未点击时默认的灰色哟 ƪ(˘⌣˘)ʃ

步骤是进入到组件的主文件(在uni_modules目录下).vue文件的style标签

$theme_color:lightgreen;//把这一行改成契合你应用的颜色就行了

如果诸位有疑问可以直接发邮件到 a1987507463@163.com 插件广场的用户消息我不怎么看的