自定义导航栏问题 - WXOPEN Club | 微信小程序专业社区

写好自定义导航栏后，设定位为

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样式的接口啊

10 回复

chao071 楼6 年前

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

dugang2 楼6 年前

自定义导航栏 (完美适配所有手机) 点我

huangli3 楼6 年前

wx获取设备类型，控制样式即可吧

ryi4 楼6 年前

可以自定义某个页面的导航栏的话就可以解决，某个页面的适配工作量还能接受

当然最好还是出一个自定义导航栏的组件，框架层面的组件就不用一直去考虑页面布局的影响比如

1，height 100%

2，fixed 或不用fixed

3，大量安卓机的适配工作

当然这些情况开发者可以自己去开发一个自定义组件去解决，一开始就规划好一个自定义导航栏组件满足上边的需求，无非使用层面可能要注意一些属性配置。但是大部分小程序刚开始开发的时候是没有自定义导航栏的需求，基本上是开发中途增加了这个需求，这个时候去规划并开发这个组件的工作量还是蛮大的，需要重新审视每个页面的布局，简单的还好，但面对一些页面中已经有 fixed 顶部的布局就需要重新规划。所以如果官方出一个自定义导航栏的组件，会节省很多开发工作。

weihan5 楼6 年前

写了个自适应的自定义导航栏组件，可以试试这个组件。https://developers.weixin.qq.com/community/develop/doc/000442e9f803e8b3c777e25585b806

jingzou6 楼6 年前

ming717 楼6 年前

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

gang488 楼6 年前

1.如果返回按钮自定义之后，物理返回键干扰，有没有解决方案呢？2. 自定义返回按钮的路由完全自定义之后，物理返回键返回也会造成操作干扰，这个可以有解决方案么？

xiulanhuang9 楼6 年前

目前可以通过 getSystemInfoSync 来获取 statusBarHeight，区分安卓和IOS来设置不同的导航区域高度

确实需要在每个页面设置padding-top，这个我们看看优化下。

guiyinglai10 楼5 年前

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