uniapp 动态tabBar（全过程包含vuex 组件 配置等）

（装船权限）

（卸船权限）

1.首先我们需要在pages.json配置tabbar 和pages （配置所有tabbar路径）

"pages": [ //pages数组中第一项表示应用启动页,{"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan","style": {"navigationBarTitleText": "装船作业计划","app-plus": {"titleNView": false,"bounce": "none"}}}, {"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand","style": {"navigationBarTitleText": "装船指令","app-plus": {"titleNView": false,"bounce": "none"}}}, {"path": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory","style": {"navigationBarTitleText": "历史","app-plus": {"titleNView": false,"bounce": "none"}}}, {"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan","style": {"navigationBarTitleText": "卸船作业计划","app-plus": {"titleNView": false,"bounce": "none"}}}, {"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand","style": {"navigationBarTitleText": "卸船指令","app-plus": {"titleNView": false,"bounce": "none"}}}, {"path": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory","style": {"navigationBarTitleText": "历史","app-plus": {"titleNView": false,"bounce": "none"}}}, ],"tabBar": {"color": "#7a7e83","selectedColor": "#0faeff","backgroundColor": "#ffffff",// "custom": true,custom(自定义)，不开启的话，在页面是有占位的，就需要在页面进行隐藏"list": [{"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselPlan"}, {"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselCommand"},{"pagePath": "pages/loadAndUnloadVessel/loadVessel/loadVesselHistory"},{"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan"}, {"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand"},{"pagePath": "pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory"}]},

2.配置动态tabBar.js

如图↓

代码↓

// 装船权限const loadVessel = [{"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselPlan","text": "装船作业计划","iconPath": require("@/static/img/common/装船作业计划.png"),"selectedIconPath": require("@/static/img/common/装船作业计划1.png")}, {"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselCommand","text": "装船指令","iconPath": require("@/static/img/common/装船指令.png"),"selectedIconPath": require("@/static/img/common/装船指令1.png")},{"pagePath": "/pages/loadAndUnloadVessel/loadVessel/loadVesselHistory","text": "历史","iconPath": require("@/static/img/common/历史.png"),"selectedIconPath": require("@/static/img/common/历史1.png")}]//卸船权限const unloadVessel = [{"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselPlan","text": "卸船作业计划","iconPath": require("@/static/img/common/装船作业计划.png"),"selectedIconPath": require("@/static/img/common/装船作业计划1.png")}, {"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand","text": "卸船指令","iconPath": require("@/static/img/common/装船指令.png"),"selectedIconPath": require("@/static/img/common/装船指令1.png")},{"pagePath": "/pages/loadAndUnloadVessel/unloadVessel/unloadVesselHistory","text": "历史","iconPath": require("@/static/img/common/历史.png"),"selectedIconPath": require("@/static/img/common/历史1.png")}]export default {loadVessel,//装船权限名最后要存入 isMemberType里unloadVessel//卸船权限名 最后要存入 isMemberType里}

3.使用vuex对tabBar列表数据进行一个存储赋值

index.js↓

import Vue from 'vue'import Vuex from 'vuex'import tabBar from './modules/tabBar'Vue.use(Vuex)const store = new Vuex.Store({modules:{tabBar},state: {},getters: {tabBarList: state => state.tabBar.tabBarList,isMemberType: state => state.tabBar.isMemberType,},mutations: {}})export default store

tabBar.js↓

import tarBarUserType from '@/utils/tabBar.js';const tabBar = {state: {// 判断当前权限isMemberType: '',// tabbar列表数据tabBarList: []},mutations: {setType(state, isMemberType) {state.isMemberType = isMemberType;state.tabBarList = tarBarUserType[isMemberType];//根据权限取出对应的tabBarconsole.log(state.tabBarList )}}}export default tabBar;

创建一个tabBar组件↓

代码↓

{{ item.text }}export default {props: {// 底部导航栏数据tabBarList: {type: Array,required: true},// 当前页面路径routePath: {type: String,required: true}},data() {return {};},methods: {selectTabBar(path) {// console.log(path)uni.switchTab({url: path})}},onLoad() {// console.log(this.tabBarList)}};.tab-bar {position: fixed;bottom: 0;left: 0;width: 100vw;padding: 0rpx;// padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));// padding-bottom: calc(10rpx + env(safe-area-inset-bottom));background-color: #fff;// background-color: red;// height:80rpx;.content {display: flex;flex-direction: row;.one-tab {display: flex;flex-direction: column;align-items: center;width: 100%;// background-color: pink;.tab-img {width: 50rpx;height: 50rpx;.img {width: 100%;height: 100%;}}.tit {font-size: 25rpx;transform: scale(0.7);}}}}

5.在存在tabbar的页面中都需要引入组件，并传相关数据（routePath传入当前页面的tabbar路径）

卸船指令import {mapGetters,mapState} from 'vuex';import tabBarAction from '@/components/tabBarAction/tabBarAction'export default {data() {return {};},computed: {// 这里的tabBarList就是数据源，直接使用传值...mapGetters(['tabBarList'])},components: {tabBarAction},}.content {margin-top: 100rpx;height: 100%;}

6.在需要的地方配置权限：↓

this.$store.commit('setType', tabbar路径);uni.switchTab({ url:tabbar路径})

7.在app.vue 里面隐藏tabBar

onShow() {uni.hideTabBar({});},

本文参照，重新丰满过程↓

小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)_uniapp动态设置tabbar_别改我bug的博客-CSDN博客