uniapp怎么做到动态切换整套底部tabbar

适用于你同一个软件想要拥有两套内容

首先，用到了uniapp的自定义底部导航栏组件

<template>
	<view class="tab-bar">
		<view class="content">
			<view class="one-tab" v-for="(item, index) in tabBarList" :key="index" s>
				<view v-if="item.text" @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 class="add-btn" v-else @click="toAdd">
					<view class="tab-img">
						<image class="img" :src="item.iconPath"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 底部导航栏数据
			tabBarList: {
				type: Array,
				default: (() => {
					return [{
							"pagePath": "你的首页路径",
							"iconPath": "你的首页未选中图标",
							"selectedIconPath": "你的首页选中图标",
							"text": "首页"
						},
                                                {
							"pagePath": "你的首页路径",
							"iconPath": "你的首页未选中图标",
							"selectedIconPath": "你的首页选中图标",
							"text": "首页"
						},
						{
							"pagePath": "你的首页路径",
							"iconPath": "你的首页未选中图标",
							"selectedIconPath": "你的首页选中图标",
							"text": "首页"
						},
						{
							"pagePath": "你的首页路径",
							"iconPath": "你的首页未选中图标",
							"selectedIconPath": "你的首页选中图标",
							"text": "首页"
						}
					]
				})
			},
			// 当前页面路径
			routePath: {
				type: String,
				required: true
			}
		},
		data() {
			return {};
		},
		methods: {
			selectTabBar(path) {
				console.log(path);
				this.$emit('onTabBar', path)
			},
			
			toAdd(){
				uni.navigateTo({
					url:"/pages/new-add/new-add"
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.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;
		border-top: 1px solid #e0e0e0;
		padding-top: 1.5vh;
		z-index: 1000;
		// position: relative;
		// background-color: red;
		// height:80rpx;


		.content {
			display: flex;
			flex-direction: row;
			align-items: center;

			.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);
				}
			}
		}
	}

	.add-btn {
		position: absolute;
		left: 50%;
		top:-15rpx;
		transform: translateX(-50%);
		.tab-img{
			width: 80rpx !important;
			height: 80rpx !important;
		}
	}
</style>

其次，在app.vue里面定义两组不同的tabbar数据

<script>
	export default {
        //准备两套底部导航栏 默认是原先的
		globalData: {
			tabBarList: [ 
                        {
                            "pagePath": "你的首页路径",
                            "iconPath": "你的首页未选中图标",
			    "selectedIconPath": "你的首页选中图标",
                            "text": "首页"
			}，
			{
                            "pagePath": "你的首页路径",
                            "iconPath": "你的首页未选中图标",
			    "selectedIconPath": "你的首页选中图标",
                            "text": "首页"
			},
			{
                            "pagePath": "你的首页路径",
                            "iconPath": "你的首页未选中图标",
			    "selectedIconPath": "你的首页选中图标",
                            "text": "首页"
			},
			{
                            "pagePath": "你的首页路径",
                            "iconPath": "你的首页未选中图标",
			    "selectedIconPath": "你的首页选中图标",
                            "text": "首页"
			}],

			examTabBarList: [
                            {
                                "pagePath": "你的首页路径",
                                "iconPath": "你的首页未选中图标",
                                "selectedIconPath": "你的首页选中图标",
                                "text": "首页"
                            }，
                            {
                                "pagePath": "你的首页路径",
                                "iconPath": "你的首页未选中图标",
                                "selectedIconPath": "你的首页选中图标",
                                "text": "首页"
                            },
                            {
                                "pagePath": "你的首页路径",
                                "iconPath": "你的首页未选中图标",
                                "selectedIconPath": "你的首页选中图标",
                                "text": "首页"
                            },
                            {
                                "pagePath": "你的首页路径",
                                "iconPath": "你的首页未选中图标",
                                "selectedIconPath": "你的首页选中图标",
                                "text": "首页"
                            }
			],
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-plus/index.scss";
</style>

然后要切换底部tabbar，这个是在请求拦截器里面通过某个接口返回值切换的 下方只展示了切换逻辑

				uni.switchTab({
                                    url: "你要切换到的另一个tabbar的首次进入页面"
				})

这个自定义tabbar组件在页面中的使用

    
    <new-tabbar :tabBarList="tabBarList" routePath="/pages/new-index/new-index" @onTabBar="onTabBar"></new-tabbar>

    import NewTabbar from "@/components/new-tabbar.vue"

    onLoad(){
                //赋值底部导航栏
                this.tabBarList = getApp().globalData.examTabBarList
            }
    onShow() {
                uni.hideTabBar() //隐藏官方的tabBar
            },

page.json文件中还要写下tarbar配置

    	"tabBar": {
		"color": "#999",
		"selectedColor": "#7B66FE",
		"borderStyle": "black",
		"backgroundColor": "#FFF",
		"iconWidth": "22px",
		"custom": true,
		"list": [
                    里面放上面两套底部导航栏数组合起来
		]
	}