uniapp 原生tabbar无法覆盖问题

刚接触 uniapp 发现原生 tabbar 无法覆盖，但还不想用 v-if 或者动态组件，所以自己封装一个组件，通过uni.hideTabBar() 隐藏 tabbar，这样既能用tabbar功能还能解决层级问题，但是需要再每个tabbar页引入自定义组件。

自定义tabbar组件

<template>
			<u-tabbar inactiveColor="rgb(42,42,42)" :value="activeIndex" @change="changeBar" :fixed="true" :border="false" :placeholder="false"
			:safeAreaInsetBottom="true">
				<u-tabbar-item class="flex-column" :text="item.title" :icon="item.icon" v-for="(item,index) in itemList" :key="index">
				</u-tabbar-item>
			</u-tabbar>
</template>

<script>
	export default {

		data() {
			return {
			//因为无法获取到 tabbar 页的索引，所以要写一个和tabbar一样的数组来判断当前tabbar页，因为页面只有加载过一次才会被缓存，所以需要判断当前页是哪一页
				itemList: [{
						title: '首页',
						icon: 'home',
						value: "homePage",
						pagePath: "pages/homepage/index"
					},
					{
						title: '打卡',
						icon: 'map',
						value: "clocked",
						pagePath: "pages/clocked/index"
					},
					{
						title: '排班',
						icon: 'order',
						value: "clander",
						pagePath: "pages/attendance/index"
					},
					{
						title: '我的',
						icon: 'account',
						value: "userEdit",
						pagePath: "pages/useredit/index"
					}
				],
				activeIndex: 0,
				
			}
		},

		mounted() {
			this.initActive()
		},
		methods: {
			initActive() {
				this.itemList.forEach((e, index) => {
					if (
						e.pagePath == getCurrentPages().pop().route
					) {
						this.activeIndex = index
					}
				})
			},
			changeBar(index){
				this.$url('/' + this.itemList[index].pagePath, 1)
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-tabbar__content{
		background-color: rgb(241,242,243);
		}
</style>

	

pages.json

这里这要填写pagePath即可

"tabBar": {
		"backgroundColor":"rgb(241,242,243)",
		"height":"60px",
		"selectedColor": "#006eff",
		"list": [{
				"pagePath": "pages/homepage/index",
				"iconPath": "/static/image/all.png",
				"selectedIconPath": "/static/image/all@2x.png",
				 "text": "首页"
			},
			{
				"pagePath": "pages/clocked/index",
				"iconPath": "/static/image/clock.png",
				"selectedIconPath": "/static/image/clock@2x.png",
				 "text": "打卡"
			},
			{
				"pagePath": "pages/attendance/index",
				"iconPath": "static/image/calendar.png",
				"selectedIconPath": "/static/image/calendar@2x.png",
				 "text": "排班"
			},
			{
				"pagePath": "pages/useredit/index",
				"iconPath": "/static/image/user.png",
				"selectedIconPath": "/static/image/user@2x.png",
				 "text": "个人"
			}
		]
	},

将自定义组件注册全局，然后再每个tabbar页引入组件即可