uni-app打開非tabBar頁面時定義新的tabBar(底部導航)(自定義tarBar組件)

使用uni-app開發的時候遇到這一個需求，一級頁面有自己的tabBar當跳轉到一個新的頁面時，出現另一個自己的底部導航（tabBar）

默認打開頁面時

在跳轉一個新的頁面時的底部導航

默認打開的的底部導航，可以通過pages.json來配置tabBar
詳情參考uni官網https://uniapp.dcloud.io/collocation/pages?id=tabbar3

但是要實現跳轉到一個全新的頁面，在去定義一個新的tabBar時，光靠配置pages.json是做不到的，這時候需要我們自己去定義封裝局部tabBar組件來實現

封裝的tabBar.vue頁面

<template>
	<view class="tarbar">
		<view v-for='(item,index) in datas' @tap="tabClick(index,item.urls,item.id)">
			<u-icon :color="item.color" :name="item.icon" size="60"></u-icon>
			<view v-text="item.name"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props:["totarBer"],//從父組件傳來的值 來控制點擊當前的顏色
		data() {
			return {
				datas: [{
						urls: '/pages/home/home',
						icon: 'home',
						name: '首頁',
						id: 1,
					},
					{
						urls: '/pages/tcpj/shakeDown',
						icon: 'order',
						name: '採購條件',
						id: 2,
					},
					{
						urls: '/pages/tcpj/orderSucceed',
						icon: 'checkbox-mark',
						name: '接單成功',
						id: 3,
					},
				],
			}
		},
		created() {
		//用來控制是顯示當前頁面的tarBar圖標變亮
			if(this.totarBer.id==2){
				this.$set(this.datas[2],'color',this.totarBer.color)
			}
			if(this.totarBer.id==1){
				this.$set(this.datas[1],'color',this.totarBer.color)
			}
			
			
		},
		methods: {
			tabClick(i,urls, id) {
				if(id==1){
					uni.reLaunch({
						url: urls
					});
				}else{
					uni.navigateTo({
						url: urls
					});
				}
				
            
			}
		}
	}
</script>

<style scoped>


	.tarbar {
		width: 100%;
		height: 96rpx;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 100;
		font-size: 30rpx;
		color: #999999;
	}

	.tarbar view {
		text-align: center;
	}
</style>

採購條件的頁面

<template>
	<view class="warp">
		<!-- 底部導航 -->
		<view>
			<tarBer :totarBer='tar'></tarBer> //使用tarBar組件
		</view>
	</view>
</template>
<script>
	import tarBer from './tarber.vue' //先把tabBar.vue組件導入
 export default{
	 data(){
		 return {
			 tar:{
				 color:'#07A7E3',
				 id:1
			 },//向子組件發送的值
		 }
	 },
	 components:{
		 tarBar
	 }
 }
</script>
<style scoped>
	.warp {
		color: #000000;
	}
</style>

同樣哪個頁面需要使用新的tabBar導航 ，先導入 在使用