收藏
回答

自定义导航栏问题

问题模块 框架类型 问题类型 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样式的接口啊

最后一次编辑于  2018-09-21  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

15 个回答

  • wintrue
    wintrue
    2018-09-28

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

    2018-09-28
    赞同 6
    回复
  • 我的我
    我的我
    2018-09-25

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

    2018-09-25
    赞同 5
    回复
  • sanford🐶~
    sanford🐶~
    2018-09-21

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

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


    2018-09-21
    赞同 1
    回复 3
    • CallMeSoul
      CallMeSoul
      2018-09-21

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

      2018-09-21
      回复
    • Mone
      Mone
      2018-09-21

      +1

      2018-09-21
      回复
    • CallMeSoul
      CallMeSoul
      2018-09-21

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

      2018-09-21
      回复
  • 安晓苏
    安晓苏
    2018-10-09

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

    2018-10-09
    赞同 1
    回复
  • 志军
    志军
    08-19

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

    08-19
    赞同
    回复
  • 一心  逝水
    一心 逝水
    2018-12-20

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

    2018-12-20
    赞同
    回复
  • hyong
    hyong
    2018-11-23

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

    2018-11-23
    赞同
    回复
  • Ryan
    Ryan
    2018-09-30

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


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

    1,height 100%

    2,fixed 或 不用fixed

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


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

    2018-09-30
    赞同
    回复
  • 一生有你
    一生有你
    2018-09-29

    +1

    2018-09-29
    赞同
    回复
  • Allen Yang 🇨🇳
    Allen Yang 🇨🇳
    2018-09-29

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

    2018-09-29
    赞同
    回复

正在加载...