收藏
评论

高适应性的自定义导航栏开发思路







  1. 非自定义导航栏高度怎么计算?

  2. 自定义导航栏高度由谁决定?

  3. 小程序自定义导航栏开发注意点与参考文档


一、默认导航栏高度怎么计算?(非custom情况下获取)

  1. wx.getSystemInfo wx.getSystemInfoSync 获取机器信息

  2. screenHeight - windowHeight   计算标题栏高度

  3. {
          'iPhone': 64,
          'iPhone X': 88,
          'android': 68
    }

    不完全统计(ip6 , ip5 , ip6p , ipx , 小米mix2  , 小米5等综合了开发工具提供的数据和真机数据)所得


二、自定义导航栏高度由谁决定?(自定义情况下,屏幕高度和窗口高度没有差别,所以要通过步骤1先获取数据,预定义到代码中)

  1. 开发时发现,自定义导航栏的实现需要 包含状态栏+胶囊 :没有自定义导航栏的时候页面是全屏幕滚动会出现在状态栏的下一层

  2. 根据上一标题中步骤1的函数,可以获得状态栏高度 statusBarHeight

  3. demo,点击打开小程序开发工具



三、小程序自定义导航栏开发注意点与参考文档

  1. 微信官方设计指导中关于胶囊按钮的描述 由此得知胶囊宽度87pt=116px,设置之后,的确能产生较好的兼容性效果

  2. 社区Q&A:自定义标题栏高度计算在 navigationStyle: 'custom',苹果X和8兼容问题

  3. 注意某些方法、参数的兼容性,时刻关注官方更新信息

  4. 开一个项目采集设备的screenHeight,windowHeight,pixelRatio等信息到一个数据库中,或者微信可以提供这样一个数据库便于计算,亦或者微信优化自定义标题栏(譬如通知栏可以改变颜色但不要算在自定义范围内,给出胶囊宽高到通知栏距离到右侧屏幕边框距离等相关参数)

最后一次编辑于  2018-07-31
收藏

16 个评论

  • 山佳
    山佳
    2018-09-07

    楼主  有没有放到github上啊 ,求借鉴

    2018-09-07
    赞同
    回复 2
    • 给窝一个口罩
      给窝一个口罩
      2018-09-07

      demo可以直接用开发工具看的,里面都有源代码

      2018-09-07
      回复
    • 山佳
      山佳
      2018-09-07

      看完自己试了下 ,发现高度有些不对, 需要的高度是计算高度的2倍左右,这种情况是哪里的问题。

      是单位的问题吗?

      还有一个疑惑是:导航栏自定义高度,那下面的内容 定位的话也要自定义么

      2018-09-07
      回复
  • 马仔
    马仔
    2018-07-31

    楼主,。这种情况怎么破啊?获取的高度都一样的!

    2018-07-31
    赞同
    回复 6
    • 给窝一个口罩
      给窝一个口罩
      2018-07-31

      非自定义标题栏 获取到的高度应该是不同的,你要先关闭custom设置,获取到高度差

      2018-07-31
      回复
    • 马仔
      马仔
      2018-07-31回复给窝一个口罩

      哦哦!但是不应该是通过两个高度,动态获取高度差才比较好的吗?还有你这里的高度差。不对的!iPhone的应该是48+状态栏的高度20=68,iPhoneX=82,Android=54+20=74,iPhone跟Android的状态栏高度都是20的!除了iPhoneX特殊!

      2018-07-31
      回复
    • 给窝一个口罩
      给窝一个口罩
      2018-07-31回复马仔
      1. 自定义标题栏的时候 没有动态高度差,就像你打印的一样,两个高度是一样的;

      2. 状态栏的高度是包含在screenHeight windowHeight   中的,也就是说 不需要单独加上20

      2018-07-31
      回复
    • 马仔
      马仔
      2018-07-31回复给窝一个口罩

      哦哦!还有个地方想请问下,假如我要自定义一个导航栏,除去状态栏的高度,导航栏的高度是不是要通过iPhone   Android   iPhoneX来判断呢?

      2018-07-31
      回复
    • 给窝一个口罩
      给窝一个口罩
      2018-07-31回复马仔

      是的,可以通过systemInfo的model来判断,如果高度不在三者中的也可以单独判断

      2018-07-31
      回复
    查看更多(1)
  • 春如旧
    春如旧
    2018-07-23

    6

    2018-07-23
    赞同
    回复
  • 张阳
    张阳
    2018-07-12

    可以搜索:信派百科;

    2018-07-12
    赞同
    回复
  • 打小就看你行
    打小就看你行
    2018-07-06

    像你demo那样写有存在bug么,感觉是目前看到最好的解决办法,赞!!!

    2018-07-06
    赞同
    回复 5
    • 给窝一个口罩
      给窝一个口罩
      2018-07-06

      高度的bug目前没看到过,搜索那个字的位子可能会有问题。目前测试范围还是不够大 所以不敢保证说不存在bug

      2018-07-06
      回复
    • 给窝一个口罩
      给窝一个口罩
      2018-07-06

      高度的bug目前没看到过,搜索那个字的位子可能会有问题。目前测试范围还是不够大 所以不敢保证说不存在bug。刚刚发现vivo x6a的标题栏高度不是68 而是71

      2018-07-06
      回复
    • 打小就看你行
      打小就看你行
      2018-07-06回复给窝一个口罩

      哦,个别的机型肯定不管,搜索那个我不用,只要主流机型没问题就ok

      2018-07-06
      回复
    • 给窝一个口罩
      给窝一个口罩
      2018-07-06回复打小就看你行

      猴 有问题随时反馈

      2018-07-06
      回复
    • 打小就看你行
      打小就看你行
      2018-07-06回复给窝一个口罩

      ok

      2018-07-06
      回复
  • 周涛
    周涛
    2018-07-06

    要是能把状态栏隐藏就好了,不然总是有点怪怪的。

    2018-07-06
    赞同
    回复 1
    • 给窝一个口罩
      给窝一个口罩
      2018-07-06

      总觉得状态栏被做进来怪怪的,可能小程序是想要打破app内的感觉吧 不得不考虑到

      2018-07-06
      回复

正在加载...

登录 后发表内容