【Uni】自定义下方导航

自定义导航栏后，Uni原生的tabbar切换时会出现闪屏的问题，使用跳转( uni.navigateTo )也有这个问题，使用重定向(uni.redirectTo)又不符合我们的初衷，于是再用Vue组件切换的形势来实现，点击下方tab时切换页面的操作。

效果

 转换格式的时候颜色就变了下面是原来的颜色

其实原理很简单就是使用组件，之后v-if、v-else-if、v-else来控制控件的出现（使用:is被提示说暂不支持动态组件）

上代码

文档目录

index.vue：

组件里面的代码都差不多就在这写一个mainPage.vue

注意要点，就是下方导航定位的问题

看这里

calc 里面 100%- statusBarHeight -上方自定义导航高度-下方导航高度

statusBarHeight 就是状态栏的高度，状态栏的高度uni提供了接口

uni.getSystemInfo({
	success(res) {				
		$this.statusBarHeight = res.statusBarHeight;
	}
})

要是直接这么写会报错，为啥会报错我也没整明白，不过倒是查到了解决方案，使用setTimeout使之变成异步的

created() {
	let $this = this;
	setTimeout(() => {
		uni.getSystemInfo({
			success(res) {
				$this.statusBarHeight = res.statusBarHeight;
			}
		})
	}, 1)
},