uniapp自定义导航栏 原生导航一直出现 最全解决办法

如图，uniapp写小程序做了自定义导航栏，因为需要根据角色不同显示不同数量的导航栏。

一、做法（只想看解决办法的直接看二）

<template>
	<div>
		<u-tabbar :value="current" @change="changeBar" @click="changeBar" activeColor="#FEA430">
			<u-tabbar-item :text="tab.text" v-for="(tab,i) in tabbarItems" :key="i" badge="0">
				<image style="width: 25px;height: 25px;" slot="active-icon" :src="tab.selectedIconPath" ></image>
				<image style="width: 25px;height: 25px;" slot="inactive-icon" :src="tab.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tabbarItems: [
					// {
					// 	pagePath: '/pages/index/index',
					// 	text: '首页',
					// 	iconPath: '/static/tabIcons/home.svg',
					// 	selectedIconPath: '/static/tabIcons/home-active.svg'
					// },
					{
							pagePath: '/pages/equipment/equipment',
							text: '设备管理',
							iconPath: '/static/tabIcons/equipment.svg',
							selectedIconPath: '/static/tabIcons/equipment-active.svg'
						},
					{
						pagePath: '/pages/domain/domain',
						text: '功能区',
						iconPath: '/static/tabIcons/domain.svg',
						selectedIconPath: '/static/tabIcons/domain-active.svg'
					},
					{
						pagePath: '/pages/my/my',
						text: '我的',
						iconPath: '/static/tabIcons/my.svg',
						selectedIconPath: '/static/tabIcons/my-active.svg'
					}
				],
			}
		},
		props: {
			current: Number
		},
		options: { styleIsolation: 'shared' },
		methods: {
			changeBar(e) {
				uni.switchTab({
					url: this.tabbarItems[e].pagePath
				})
			},
		}
	}
</script>

<style scoped lang="scss">
/deep/.u-tabbar__content{
	border-top-width: 0 !important;
}
</style>

1、在这个地方写这个文件。

2、在pages.json里面

"tabBar": {
		"color": "#fff",
		"selectedColor": "#fff",
		"backgroundColor": "#ffffff",
		"list": [
			// {
			// 	"pagePath": "pages/index/index", //页面路径
			// 	"text": "首页" //按钮文字，
			// },
			{
				"pagePath": "pages/equipment/equipment", //页面路径
				"text": "设备管理" //按钮文字
			},
			{
				"pagePath": "pages/domain/domain",
				"text": "功能区"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的"
			}
		]
	},

需要配置这个原生导航，不然不能实现跳转，

注：将文字设置为白色（用户第一次进来的时候在所有页面都没有加载出来的时候有可能会先出现原生导航，所以我们可以将文字颜色改成白色，这样就完全看不出来了。）

3、将这个组件注册为全局组件（main.js）

import tabBar from './pages/components/tabbar.vue';

Vue.component('tabBar', tabBar)//使用tabBar组件

4、

<tab-bar :current="0"></tab-bar>

再在这三个页面底部引入这个组件

例如，第一个tab里面的 current就传0，以此类推。

5、App.vue文件里面

<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
			uni.hideTabBar()
		},
		onShow: function() {
			console.log('App Show')
			uni.hideTabBar()
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

添加这个，隐藏原生底部导航。

二、问题：以上就是自定义导航的步骤，但是还是会遇见一些问题：

登录进去的时候还是显示了底部导航，或者从别的页面跳转或返回到这三个页面的时候还是会出现底部导航。

解决办法：  

在放这三个组件的页面都添加一个生命周期

onShow() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		
		},

隐藏原生的tabbar。就可以解决这个问题了。