uniapp使用 uview-plus 底部导航栏(vue3项目)

前提：项目中已引入uview-plus，具体可查看 uview-plus官网 Tabbar 底部导航栏

网站：Tabbar 底部导航栏 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

✍完整代码地址：front-mini-programe/components/tabbar/tabbar.vue · cheinlu/土拨鼠充电系统 - Gitee.com

一、先在components里创建一个tabbar组件

二、tabbar具体代码：

注意： 跳转路径：pagePath以/开头

说明：如果直接在tabbar组件中定义active变量，active变量在每次切换时会被重置，因使用的组件中会使用tabbar组件，导致组件维护的active出现两份。所以在pinia中定义默认选中的索引，组件之间数据共享

store/user.js中具体代码：

import { defineStore } from 'pinia'

//创建小仓库
const useUserStore = defineStore('User', {
  state: () => {
    return {
      activeTab: 1 // 默认选中的索引
    }
  },
  actions: {
    //设置active的值
    setActive(active) {
      this.activeTab = active
    }
  }
})

//暴露小仓库
export default useUserStore

关于uniapp中pinia的使用，可查看之前写的这篇文章

uniapp使用 uview-plus 和 Pinia（vue3项目）_翻滚的露西的博客-CSDN博客

三、pages.json配置tabbar的基本路径

备注：只需要路径即可

"tabBar": {
        "color": "#999",
        "selectedColor": "#0aa671",
        "borderStyle": "white",
        "list": [
            {
                "pagePath": "pages/charge/charge"
            },
            {
                "pagePath": "pages/scan/scan"
            },
            {
                "pagePath": "pages/my/my"
            }
        ]
  	}

四、在需要使用的页面引入tabbar组件

//my页面

五、隐藏pages.json里配置的导航栏，使用封装的tabbar组件

备注：我是在根组件App.vue中隐藏的，只写一次，这样使用的页面就不用再写了 

六、效果展示

 

七、样式更改

备注：这是uview-plus的配置文件，默认情况满足需求可以不用更改

如要修改字体大小，路径为：引入的uview-plus文件夹下的components中找到u-tabbar-item.vue文件内的修改 font-size

 如要更改tabbar高度，路径为：引入的uview-plus文件夹下的components中找到 u-tabbar.vue 文件内的修改 height

最后：