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导航 ，先导入 在使用