解决小程序自定义导航栏和右边胶囊高度一致

名词解释:
1.statusBarHeight:状态栏高度(小程序可获取),是指顶部显示手机信号,时间,电量的那一个小的状态条的高度。如图红色部分。
2.titleBarHeight:标题栏高度(小程序获取不到),是从状态栏的底部开始的,到标题栏的底部的高度为止。如图绿色部分。
3.wx.getMenuButtonBoundingClientRect():获取菜单按钮(右上角胶囊按钮)的布局位置信息。
在这里插入图片描述

目的一:要实现自定义导航栏和小胶囊的高度一致,如图显示:

在这里插入图片描述
方法:设置自定义导航栏top为wx.getMenuButtonBoundingClientRect().top

目的二:实现自定义胶囊按钮和右边的高度一致

在这里插入图片描述
方法:利用wx.getSystemInfo()返回的参数statusBarHeight计算,

胶囊高度为32px,

fixed定位top值计算:statusBarHeight + (titleBarHeight - 32)/2
(titleBarHeight安卓是48,ios是44)
参考网上资源:1.https://developers.weixin.qq.com/community/develop/doc/00086eae518d70f88ea7557fb56c00?_at=1560019702849
2.https://developers.weixin.qq.com/community/develop/doc/000c443517c1b819e888d68e751000

  • 10
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值