评论

自定义导航栏所有机型的适配方案

微信小程序中自定义导航栏,所有机型的适配方案。

写在前面的话

大家看到这个文章时一定会感觉这是在炒剩饭,社区中已经有那么多分享自定义导航适配的文章了,为什么我还要再写一个呢?
主要原因就是,社区中大部分的适配方案中给出的大小是不精确的,并不能完美适配各种场景。

社区中大部分文章给到的值是 iOS -> 44px , Android -> 48px

思路

正常来讲,iOS和Android下的胶囊按钮的位置以及大小都是相同且不变的,我们可以通过胶囊按钮的位置和大小再配合 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 statusBarHeight 来计算出导航栏的位置和大小。

小程序提供了一个获取菜单按钮(右上角胶囊按钮)的布局位置信息的API,可以通过这个API获取到胶囊按钮的位置信息,但是经过实际测试,这个接口目前存在BUG,得到的值经常是错误的(通过特殊手段可以偶尔拿到正确的值),这个接口目前是无法使用的,等待官方修复吧。

下面是我经过实际测试得到的准确数据:

真机和开发者工具模拟器上的胶囊按钮不一样

# iOS
	top 4px
	right 7px
	width 87px
	height 32px
   
# Android
	top 8px
	right 10px
	width 95px
	height 32px
    
# 开发者工具模拟器(iOS)
	top 6px
	right 10px
	width 87px
	height 32px
    
# 开发者工具模拟器(Android)
	top 8px
	right 10px
	width 87px
	height 32px

top 的值是从 statusBarHeight 作为原点开始计算的。

使用上面数据中胶囊按钮的高度加 top * 2 上再加上 statusBarHeight 的高度就可以得到整个导航栏的高度了。

为什么 top * 2 ?因为胶囊按钮是垂直居中在 title 那一栏中的,上下都要有边距。

扩展

通过胶囊按钮的 right 可以准确的算出自定义导航的 左边距

通过胶囊按钮的 right + width 可以准确的算出自定义导航的 右边距

通过 wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 windowWidth - 胶囊按钮的 right + width 可以准确的算出自定义导航的 width

再扩展

wx.getSystemInfo 或者 wx.getSystemInfoSync 中得到的 statusBarHeight 每个机型都不一样,刘海屏得到的数据也是准确的。

如果是自定义整个页面,iPhone X系列的刘海屏,底部要留 68px ,不要问我为什么!

代码片段

https://developers.weixin.qq.com/s/Q79g6kmo7w5J

最后一次编辑于  2019-02-25  
点赞 12
收藏
评论

9 个评论

  • 波~
    波~
    2019-04-01

    标题加在哪?


    2019-04-01
    赞同 2
    回复
  • Yunior
    Yunior
    2019-10-25

    官方文档->扩展能力->Navigation组件实现原理类似 社区中大部分文章给到的值是 iOS -> 44px , Android -> 48px

    我参照这个思路自己也写了一个,目前没遇到适配问题,应该是准确的。

    小程序顶部自定义导航组件实现原理及坑分享

    2019-10-25
    赞同 1
    回复
  • 志军
    志军
    2019-08-19

    这篇文章帮你们解决遇到的这个问题,拿走不谢.点我点我点我,如有帮助记得点个星星哦

    2019-08-19
    赞同 1
    回复
  • 陈式坚
    陈式坚
    2019-03-01

    没错,之前也是想用这个方法,结果数值在真机上错的乱七八糟


    最后还是先写死了...

    2019-03-01
    赞同 1
    回复 3
  • 2019-02-23

    支持,点赞

    2019-02-23
    赞同 1
    回复
  • 宁宁
    宁宁
    2019-09-23

    wx.getMenuButtonBoundingClientRect();微信给的这个api,可以返回这些数值

    2019-09-23
    赞同
    回复
  • 宁宁
    宁宁
    2019-09-23

    到位👍👍

    2019-09-23
    赞同
    回复
  • bush
    bush
    2019-03-08

    想问下新出的水滴屏,刘海屏,还有各种屏........都怎么个方案?

    2019-03-08
    赞同
    回复 1
    • Stephen
      Stephen
      2019-03-08

      同样的方案

      2019-03-08
      1
      回复
  • 烨
    2019-02-23

    1.将手机重启一下试试的。

    2.还原出厂设置试试,点击设置--通用/更多设置--恢复出厂设置--还原所有设置,还原所有设置不会删除手机任何数据的。

    3.可以试试清除所有数据,点击设置--通用/更多设置--恢复出厂设置--清除手机数据--重置手机(勾选手机U盘),清除手机数据会将手机格式化,所以此项操作前可以将手机数据备份一下,包括联系人,照片之类的。  

    4.如果还不行,可以去售后服务中心检测处理的。售后服务中心地址\电话在设置-通用/更多设置-售后服务菜单 中查询到。


    2019-02-23
    赞同
    回复 1
    • Stephen
      Stephen
      2019-02-23

      啥意思?

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