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];//根据权限取出对应的tabBar
            console.log(state.tabBarList )
        }
    }
}

export default tabBar;

创建一个tabBar组件↓

代码↓

<template>
    <view class="tab-bar">
        <view class="content">
            <view class="one-tab" v-for="(item, index) in tabBarList" :key="index" @click="selectTabBar(item.pagePath)">
                <view>
                    <view class="tab-img">
                        <image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
                        <image v-else class="img" :src="item.iconPath"></image>
                    </view>
                </view>
                <view class="tit">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    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)
        }
    };
</script>

<style lang="scss">
    .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);
                }
            }
        }
    }
</style>

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

<template>
    <view class="content">
        卸船指令
        
        <tabBarAction :tabBarList='tabBarList' routePath='/pages/loadAndUnloadVessel/unloadVessel/unloadVesselCommand'>
        </tabBarAction>
    </view>
</template>

<script>
    import {
        mapGetters,
        mapState
    } from 'vuex';
    import tabBarAction from '@/components/tabBarAction/tabBarAction'

    export default {
        data() {
            return {

            };
        },
        computed: {
            // 这里的tabBarList就是数据源，直接使用传值
            ...mapGetters(['tabBarList'])
        },
        components: {
            tabBarAction

        },
    }
</script>

<style lang="scss" scoped>
    .content {
        margin-top: 100rpx;
        height: 100%;

    }
</style>

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

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

7.在app.vue 里面隐藏tabBar

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

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

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