uniapp 原生tabbar无法覆盖问题（uView框架）

tabbar因原生层级过高，框架无法覆盖，tabbar总是在最顶层

uniapp 发现原生 tabbar 无法被覆盖。 封装一个组件，通过uni.hideTabBar() 隐藏
tabbar，这样既能用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 setup lang='ts'>
import { onShow } from '@dcloudio/uni-app';
import { ref } from 'vue'
import { uRouter } from '@/utils/router';

const { go } = uRouter
			//因为无法获取到 tabbar 页的索引，所以要写一个和tabbar一样的数组来判断当前tabbar页，因为页面只有加载过一次才会被缓存，所以需要判断当前页是哪一页
const itemList = [{
    title: '当前任务',
    icon: 'home',
    value: "homePage",
    url: "pages/index/index"
},
{
    title: '业务功能',
    icon: 'map',
    value: "clocked",
    url: "pages/business/index"
},
]

const activeIndex = ref(0)


const initActive = () => {
    const pages = getCurrentPages()
    activeIndex.value = itemList.findIndex(e => e.url === pages[0].route)
}

const changeBar = (index) => {
    uni.switchTab({url:'/' + itemList[index].url})
}

onShow(() => {
    initActive()
    uni.hideTabBar()

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

pages.json文件

这里只要填写pagePath即可

  "tabBar": {
		"height":"55px",
		"list": [{
				"pagePath": "pages/index/index",
        "text": "当前任务"
			},
			{
				"pagePath": "pages/business/index",
        "text": "业务功能"
			}
		]
	},