写好自定义导航栏后，设定位为
topbar{
position: fixed;
width: 100%;
left: 0;top: 0;
}
这样就可以浮在顶部了
然后就是所有页面都要padding-top一定像素
page{
padding-top:128rpx}
但这样是有问题的，一般手机状态栏高度为20px，则没问题
但是类型iPhone X这些刘海屏状态栏高度为44px，则上面应该是
padding-top:176rpx |
但是在css中无法动态知道设备的状态栏高度啊
难道要在每个页面去获取状态栏高度，然后再在页面设置每个页面的padding-top高度么？
我的页面少说也有个30多个啊。
有没有更好的解决方法？
理想的解决方法是：
在自定义导航栏组件内获取状态栏高度，
然后再在去统一设置page Dom的css样式。
然后每个页面引入这个自定义导航栏组件。
问题是没有获取page和设置dom样式的接口啊
说辣么多 不如做一个： wechatide://minicode/4rvEcumU7y2U
https://developers.weixin.qq.com/community/develop/doc/000884cffb02c8d80b67f4a335b000
在官方给出的组件中,有个很致命的问题就是浮动出来了，所有的布局都需要在顶部加padding-top:140rpx，
导致在x的适配中出现问题，这个是一个很致命的问题，导致我不得不做一次适配，非常让人头大，而且自从我可以去掉或透明顶部后，Ui跟疯一样出这样的图。
思考了一下，解决方案出来了
在组件上使用，模拟器上适配是没问题的，真机中就不知道了。
<view style='height:{{navtabheight*2+120}}rpx;' ></view>
然后通过传值，做成动态的可以消失和隐藏， 适配完美！
我的解决方案是：
在一个自定义组件里面，定义一个父view，这个view高度是根据statusBarHeight来计算的，然后再在这个view里面定义fixed的一个层，完美解决文本流问题和一直fixed问题
也有问题，有些页面是heigth:100%的；
你这样的话还是需要调整很多页面
虽然不是很懂你的情况，我目前遇到的改造情况，原来的page，除了把自定义导航组件丢进去，其他什么padding都没设置，因为这个自定义导航是在文本流里面，会自动把下面的东西压下去，另外自定义导航里面的fixed view，在滚动的时候也能绝对在顶部，所以没遇到其他不适用的情况
比如我我页面
<page style="height:100%"><topBar></topBar><viewstyle="height:100%"></view/></page>明白了，如果我遇到你这种情况，我会把page 改为flex 布局，里面的view 加个css （flex：1），效果是一样的
还有页面有其他需要固定在顶部的又要再做处理，工作量好大，好繁琐
我的方案是在自定义组件里面 再设置一个 根据statusBarHeight 来计算高度的 view.来进行占位。 这样就不用每个页面设置padding-top了
我也是这样的，但是你要把自定义导航栏固定在头部啊， 就要绝对定位或相对定位了。
绝对定位或相对定位后就脱离文档流啦，这个每个每个页面设置padding-top。
你这样只是我的初版demo，只适用没滚动的页面的。没滚动就一直在顶部了
我的意思是 你设置了 你设置一个绝对定位的 view当做导航栏 。。在设置一个view 在底部 这样滚不滚的都没影响啊。
通楼上差不多吧，还是很多问题
从此走上了无限适配刘海的不归路。。
唉，只能说官方给出了自定义，没提供完美的解决方法