uni-app 使用 Uview2.x 搭建自定义tabbar组件，自定义navbar，还会解决自定义导航栏引起闪烁性能差的问题！！！_uniapp 自定义导航栏 onload 如果有复杂的计算,会有样式闪烁

pages.json

 上面可以看到tabbar我使用的原生的，但是值配置了pagepath，并且page里三个首页都可以自定义顶部导航栏，当然如果删掉custom那一行代码，就切换成原生顶部导航栏了。

下面拿一个首页作为代码演示：（顶部自定义导航栏组件和底部导航栏组件会放在最后）

下图组件没有引入,是使用了easyCom,官网详解

<template>
	<div>
		<tabbarTop :data="tabbarTopData"></tabbarTop>
		<tabbarBottom :current="0"></tabbarBottom>
	</div>
</template>
 
<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				tabbarTopData: {
					title: "家园首页"
				}
			}
		},
		components: {},
		computed: {
			...mapState(["hasLogin"])
		},
		onLoad() {},
		onShow() {},
		methods: {
 
		}
	}
</script>
 
<style lang="scss" scoped>
</style>

需要在App.vue中onLaunch和onShow方法后面加上uni.hideTabbar({})隐藏原生tabbar(因为兼容性问题两个地方必须都加上)

 特别需要留意的"navigationStyle": "default" 只能控制顶部导航栏是否自定义，而底部导航栏是由下图选项控制，如果要隐藏可以通过   uni.hideTabBar()  隐藏掉，其实就是使用原生的底部导航栏，只不过通过api隐藏掉，然后每个tabbar页面都写上自定义的底部导航栏，

 修改大小
根据需要修改了u-tabbar和u-tabbar-item宽度高度，这些基本属性在uni_modules/uview-ui/components/u-tabbar/u-tabbar.vue和uni_modules/uview-ui/components/u-tabbar-item/u-tabbar-item.vue中都有相应的注释，写得很清楚，自行修改就好

修改u-tabbar的高度，我使用的是深度选择器，只不过需要在自定义底部导航栏组件里面开启一个option，我封装的自定义底部导航栏组件代码如下：

<template>
	<div class="tabBox">
		<u-tabbar :placeholder="false" :value="current?current:0" @change="tabbarChange" :safeAreaInsetBottom="true" :border="false">
			<u-tabbar-item text="首页">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/橘子.svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/布丁.svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="案例">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/煎蛋.svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/冰淇淋.svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text=" ">
				<image class="u-page__item__slot-icon shopTabar" slot="active-icon" src="@/static/img/香蕉.svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/胡萝卜.svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="评测">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/香蕉.svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/胡萝卜.svg">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/img/香蕉.svg">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/img/胡萝卜.svg">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</div>
</template>
 
<script>
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				list: [
					{ path: "pages/home/index" },
					{ path: "pages/caseStory/index" },
					{ path: "pages/shop/index" },
					{ path: "pages/evaluation/index" },
					{ path: 'pages/user/index' },
				]
			}
		},
		props: {
			current: Number
		},
		components: {},
		onLoad() {
 
		},
		onShow() {
 
		},
		methods: {
			tabbarChange(e) {
				console.log(e, '/' + this.list[e].path);
				uni.switchTab({
					url: '/' + this.list[e].path
				})
			}
		}
	}
</script>
 
<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 54rpx;
		height: 54rpx;
	}
 
	.tabBox {
 
		::v-deep .u-tabbar__content__item-wrapper {
			height: 163rpx;
		}
 
		::v-deep .u-tabbar__content__item-wrapper .u-tabbar-item:nth-child(3) .u-page__item__slot-icon {
			width: 102rpx;
			height: 102rpx;
		}
	}
</style>

至于为什么使用option选项：看这篇文章

如果还需要添加底部导航栏按下出现阴影的css效果：参考

自定义导航栏封装的组件：

<template>
	<div>
		<u-navbar :title="data.title" :safeAreaInsetTop="true" :fixed="true">
			<view class="u-nav-slot" slot="left">
				<u-icon name="home" size="40"></u-icon>
			</view>
		</u-navbar>
	</div>
</template>
 
<script>
	export default {
		data() {
			return {
 
			}
		},
		props: {
			data: Object
		},
		components: {},
		onMounted() {
 
		},
		onShow() {
 
		},
		methods: {
 
		}
	}
</script>
 
<style lang="scss" scoped>
	::v-deep.u-navbar__content__left {
		.uicon-home {
			font-size: 80rpx !important;
		}
	}
</style>

---

后续产品让把tabbar设置成五个，中间的一个设置为圆的并且突出显示，如下图：

只需要在上面封装的tabbar代码里面用深度选择器改一下第三个item：

 

还有一种方案 切换tabbar的时候并未跳转页面，而是把tabbar页面分别封装成了组件 在切换组件。（豌豆拼车小程序 貌似就是这种）