[已解决]自定义导航栏问题

时间：2019-05-03 来源：小程序工厂

问题模块框架类型问题类型 API/组件名称终端类型微信版本基础库版本
API和组件微信小程序需求 navigation 客户端最新最新

写好自定义导航栏后，设定位为
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样式的接口啊

微信小程序开发问题解答

微信小程序开发者回答：

能个性化右上角的两个按钮就好了

微信小程序开发者回答：

总的来说官方要是能单个页面自定义导航栏就不用那么麻烦了

微信小程序开发者回答：

目前可以通过 getSystemInfoSync 来获取 statusBarHeight，区分安卓和IOS来设置不同的导航区域高度
确实需要在每个页面设置padding-top，这个我们看看优化下。

微信小程序开发者回答：

嗯嗯。优化好，告诉一声，thx

微信小程序开发者回答：

还有个问题啊，就是自定义导航的标题，现在也是自定义的，如果有个获取原生导航标题@的接口，那就不用改怎么多了，标题的设置都用回原来的。

微信小程序开发者回答：

我觉得重点不是这个，重点是android全屏机底部的安全距离无法判断，而且android机型复杂。不像iphone只有一个iphoneX，楼说说的这个不是大问题 bobo 的方法可以解决，官方已经给出来statusBarHeight

微信小程序开发者回答：

说辣么多不如做一个： wechatide://minicode/4rvEcumU7y2U
https://developers.weixin.qq.com/community/develop/doc/000884cffb02c8d80b67f4a335b000

微信小程序开发者回答：

在官方给出的组件中,有个很致命的问题就是浮动出来了，所有的布局都需要在顶部加padding-top:140rpx，

导致在x的适配中出现问题，这个是一个很致命的问题，导致我不得不做一次适配，非常让人头大，而且自从我可以去掉或透明顶部后，Ui跟疯一样出这样的图。

思考了一下，解决方案出来了

微信小程序开发者回答：

我的解决方案是：
在一个自定义组件里面，定义一个父view，这个view高度是根据statusBarHeight来计算的，然后再在这个view里面定义fixed的一个层，完美解决文本流问题和一直fixed问题

微信小程序开发者回答：

也有问题，有些页面是heigth:100%的；
你这样的话还是需要调整很多页面

微信小程序开发者回答：

虽然不是很懂你的情况，我目前遇到的改造情况，原来的page，除了把自定义导航组件丢进去，其他什么padding都没设置，因为这个自定义导航是在文本流里面，会自动把下面的东西压下去，另外自定义导航里面的fixed view，在滚动的时候也能绝对在顶部，所以没遇到其他不适用的情况

微信小程序开发者回答：

比如我我页面

微信小程序开发者回答：

明白了，如果我遇到你这种情况，我会把page 改为flex 布局，里面的view 加个css （flex：1），效果是一样的

微信小程序开发者回答：

还有页面有其他需要固定在顶部的又要再做处理，工作量好大，好繁琐

本文网址：http://www.91bianli.com/weixinxiaochengxu/45212.html

上一篇：微信小程序内容安全审核

下一篇：微信小程序定制wx.showLoading 闪一下就没了