【关于微信小程序导航栏的那些坑（uniapp）】

相信各位前端开发的小伙伴们经常在开发的过程中都曾遇到过这样的问题！

        1.小程序同一个页面用var(--status-bar-height)和uni.getSystemInfoSync().statusBarHeight获取的状态栏高度不一致。

        2.在开发者工具中的某个机型下开发得好好的，然后一切换机型。。。。 唉呀！这页面怎么被顶下来了，哎呀！这页面怎么又被导航栏覆盖了呀。

        3.明明在iphone x机型下页面都不滚动，怎么到了iphone6plus机型就滚动了呢？

以上问题出现的原因都是因为，在页面样式的编写中页面元素的高度总和超过了100vh（也就是视窗的高度）。

那么如何解决上述的问题呢？如下（tips个人见解，勿喷）

        注意：在uniapp中需要使用方法返回，不然在页面中加载不出来 

然后挂载在prototype中（可以像我这样做）

 然后在页面中你就可以这样使用：

 下面的my-NavBar是我自定义的导航栏，设置的高度为90rpx，然后在每个页面的根标签使用如下代码就能避免页面被导航栏吞没啦

 :style="{ 'padding-top': 'calc(90rpx +  ' + $statusBarHeight() + ')' }"

然后页面内的内容只要加起来能够满足 100vh -（90rpx +  $statusBarHeight()）的高度就ok啦。