uni-app自定义导航栏 屏幕高度适配的坑

uni-app官方给出的自定义导航栏组件是真的坑啊…
由于网上现在各种关于自定义导航栏的教程都有，笔者在此处就不赘述如何做自定义导航栏了，下面转载一篇笔者决定还不错的文章

以下是我发现的问题

不知道大家发现没有，官方给出的插件，原来这里是没有这个height高度的，导致在iphone5的模板里，顶部会被遮挡一些

其实解决的方法也不难

首先我们要做的，就是获取设备的高度

//App.vue
onLaunch: function(option) {
		uni.getSystemInfo({
			success: function(e) {
				Vue.prototype.statusBar = e.statusBarHeight
				console.log(e.statusBarHeight)
				// #ifndef MP
				if (e.platform == 'android') {
						Vue.prototype.customBar = e.statusBarHeight + 50
				   } else {
						Vue.prototype.customBar = e.statusBarHeight + 45
					}
					// #endif

					// #ifdef MP-WEIXIN
					let custom = wx.getMenuButtonBoundingClientRect()
					console.log(custom)
					Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif

					// #ifdef MP-ALIPAY
					Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
					// #endif
				}
			})
			
			
		}

2.然后记得在插件下面的data处获取一下

//uni-nav-bar.vue
data() {
			return {
				customBarH: this.customBar,
				statusBarH:0
			}
		},

感谢各位的阅读，恳请大家不吝批评指教，大家一起相互学习，相互成长，如果感兴趣的小伙伴可以关注我，笔者在每篇文章下面，都会分享一些不错的资源，和大家一起成长

uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
放一些好的学习资源，大家共勉
写给初中级前端的高级进阶指南（万字长文，路线明确）
这真的是一篇神文，非科班或者对于进阶迷茫的小伙伴可以看看