uniapp自定义底部tabBar

使用场景：在一个非tabbar页面，想要有底部导航效果，故自定义效果，系统原底部导航栏仍在正常使用

效果：

布局：

<template><view class="tab-bar" :style="{height: height + 'px'}"><view v-for="(item, index) in tabBars" :key="index" @click="switchTab(item)":style="{color: index === selectIndex ? item.selectedTextColor : item.textColor}"><view style="display: flex; justify-content: center;"><image :src="index === selectIndex ? item.selectedIconPath : item.iconPath" style="height: 25px; width: 25px;"></image></view><view style="margin-top: 2px; font-size: 12px;">{{item.text}}</view></view></view>
</template><script>export default {name:"tabBar",props: {tabBars: {type: Array,required: true},selectIndex: {type: Number,default: 0}},data() {return {height: undefined};},methods: {switchTab(item) {if (this.getCurrentPageIndex() !== item.pagePath) {uni.redirectTo({url: item.pagePath});}},getCurrentPageIndex() {const pages = getCurrentPages();return pages[pages.length - 1].route;}},mounted() {let systemInfo = uni.getSystemInfoSync();let tabBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - systemInfo.statusBarHeight;this.height = tabBarHeight}}
</script><style>
.tab-bar {display: flex;justify-content: space-around;position: fixed;height: 5vh;bottom: 0;width: 100%;background-color: #fbfcfe;border-top: 1px solid rgba(0, 0, 0, 0.1);padding-top: 3px;padding-bottom: 2px;
}
</style>

使用：

<tabBar :tab-bars="approvalTabbar" :selectIndex="1"></tabBar>
// selectIndex 是当前页面的数组下标
approvalTabbar = [{iconPath: '/static/icon/mess.png',selectedIconPath:'/static/icon/mess-selected.png',text: "发起申请",pagePath:'/pages/approval/launch/launch',textColor: tabTextColor,selectedTextColor: tabSelectedTextColor},{iconPath: '/static/icon/approval-mine.png',selectedIconPath:'/static/icon/approval-mine-selected.png',text: "我审批的",pagePath:'/pages/approval/accraditation/accraditation',textColor: tabTextColor,selectedTextColor: tabSelectedTextColor},{iconPath: '/static/icon/submit.png',selectedIconPath:'/static/icon/submit-selected.png',text: "已提交",pagePath:'/pages/approval/submit/submit',textColor: tabTextColor,selectedTextColor: tabSelectedTextColor}
]

不足之处：

1.需要在参与跳转的每个页面引入组件

2.引入时需要传递相同的tabs数组数据、页面与数组对应的下标

3.页面跳转后会重绘底部导航栏，出现闪的问题