收藏
回答

自定义导航栏问题

问题模块 框架类型 问题类型 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  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

26 个回答

  • wintrue
    wintrue
    2018-09-28

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

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

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

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

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

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


    2018-09-21
    赞同 11
    回复 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
    赞同 11
    回复
  • 卢霄霄
    卢霄霄
    2018-09-21

    从此走上了无限适配刘海的不归路。。

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

      唉,只能说官方给出了自定义,没提供完美的解决方法

      2018-09-21
      赞同
      回复
  • 远
    2018-09-21

    我的方案是在自定义组件里面 再设置一个 根据statusBarHeight 来计算高度的 view.来进行占位。 这样就不用每个页面设置padding-top了

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

      我也是这样的,但是你要把自定义导航栏固定在头部啊, 就要绝对定位或相对定位了。

      绝对定位或相对定位后就脱离文档流啦,这个每个每个页面设置padding-top。


      你这样只是我的初版demo,只适用没滚动的页面的。没滚动就一直在顶部了

      2018-09-21
      赞同
      回复
    • 远
      2018-09-21

      我的意思是 你设置了 你设置一个绝对定位的 view当做导航栏 。。在设置一个view 在底部 这样滚不滚的都没影响啊。

      2018-09-21
      赞同
      回复
    • CallMeSoul
      CallMeSoul
      2018-09-25回复

      通楼上差不多吧,还是很多问题

      2018-09-25
      赞同
      回复
  • bobo
    bobo
    2018-09-24

    我的解决方案是:

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

    2018-09-24
    赞同
    回复 5
    • CallMeSoul
      CallMeSoul
      2018-09-25

      也有问题,有些页面是heigth:100%的;

      你这样的话还是需要调整很多页面

      2018-09-25
      赞同
      回复
    • bobo
      bobo
      2018-09-26回复CallMeSoul

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

      2018-09-26
      赞同
      回复
    • CallMeSoul
      CallMeSoul
      2018-09-26回复bobo

      比如我我页面

      <page style="height:100%">
       
          <topBar></topBar>
       
          <view style="height:100%">
       
          </view/>
       
      </page>


      2018-09-26
      赞同
      回复
    • bobo
      bobo
      2018-09-26回复CallMeSoul

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

      2018-09-26
      赞同
      回复
    • CallMeSoul
      CallMeSoul
      2018-09-26

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

      2018-09-26
      赞同
      回复
  • 子夜
    子夜
    2018-09-29

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




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




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





    在组件上使用,模拟器上适配是没问题的,真机中就不知道了。


    <view style='height:{{navtabheight*2+120}}rpx;' ></view>


    然后通过传值,做成动态的可以消失和隐藏, 适配完美!

    2018-09-29
    赞同
    回复
  • 仙༊
    仙༊
    2018-09-29

    说辣么多 不如做一个: wechatide://minicode/4rvEcumU7y2U

    https://developers.weixin.qq.com/community/develop/doc/000884cffb02c8d80b67f4a335b000


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

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

    2018-09-29
    赞同
    回复