收藏
回答

导航栏高度设置

最近尝试了 "navigationStyle":"custom",即所谓“全屏模式”

发现设备适配遇到了问题。

导航栏的高度没有获取的途径,机型太多难以全部适配。

之前可以用 screenHeight - windowHeight - statusBarHeight  来得到导航栏高度。

但是“全屏模式”下,screenHeight 和 windowHeight 是一样的,也就无法得到导航栏的高度了。

建议:

wx.getSystemInfo 接口中增加导航栏高度。或者像另一个帖子里说的 提供“胶囊” 中线 的相对位置。

或者官方能够提供其他的解决方案。


七夕快乐



回答关注问题邀请回答
收藏

5 个回答

  • 改变吧  命运  (王亚浩)
    改变吧 命运 (王亚浩)
    2021-06-01

    你们可以通过这种方式获取导航栏的高度

    <navigation-bar wx:if="{{navigation.visible}}" id="navigation”></navigation-bar>

    const query = this.createSelectorQuery();

    query.select("#navigation").boundingClientRect((res: WechatMiniprogram.BoundingClientRectCallbackResult) => {

                console.log(res);

    })


    2021-06-01
    有用
    回复
  • 西赛德李
    西赛德李
    2018-08-22

    Android 导航栏高度 48px

    iOS 导航栏高度 44px

    2018-08-22
    有用
    回复 4
    • 法隆
      法隆
      2018-08-23

      刘海屏了解一下

      2018-08-23
      回复
    • 西赛德李
      西赛德李
      2018-08-23回复法隆

      手头没有 Android 的刘海屏手机,但是 iPhone X 是符合这个数据的

      2018-08-23
      回复
    • 法隆
      法隆
      2018-08-23回复西赛德李

      暂且不谈ios这种已经算比较统一的,安卓端国内各个品牌的手机胶囊位置都不一样。。你这个数据完全没意义

      2018-08-23
      回复
    • 西赛德李
      西赛德李
      2018-08-23回复法隆

      你手头有 Android 刘海屏的话可以试下,我觉得微信这个数据应该是统一的

      2018-08-23
      回复
  • 法隆
    法隆
    2018-08-20

    同求

    2018-08-20
    有用
    回复
  • jackyon
    jackyon
    2018-08-17

    同求方案,这样全屏下很难做到自定义导航跟statusbar能够水平对齐

    2018-08-17
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-08-17

    好的,反馈已收到,我们记录下这个需求

    2018-08-17
    有用
    回复 3
    • error
      error
      2019-02-22

      最近尝试了 "navigationStyle":"custom",即所谓“全屏模式”

      发现设备适配遇到了问题。

      导航栏的高度没有获取的途径,机型太多难以全部适配。

      之前可以用 screenHeight - windowHeight - statusBarHeight  来得到导航栏高度。

      但是“全屏模式”下,screenHeight 和 windowHeight 是一样的,也就无法得到导航栏的高度了。



      这个有解决方案了吗

      2019-02-22
      回复
    • Tiger~
      Tiger~
      2019-02-22回复error

      https://developers.weixin.qq.com/miniprogram/dev/api/wx.getMenuButtonBoundingClientRect.html

      2019-02-22
      1
      回复
    • error
      error
      2019-02-22回复Tiger~

      感谢

      2019-02-22
      回复
登录 后发表内容