微信小程序自定义导航栏 胶囊菜单按钮高度完美适配

在自定义小程序导航栏时,右上角的胶囊(MenuButton)在不同机型测试,会发现很难适配。

实测中 不同的手机,胶囊高度不一样、状态栏高度不一样。与模拟器显示的情况是不一样的。

完全需要根据手机,动态的计算高度。

先看一些小程序顶部导航栏适配的情况

图一 某团     图二 某乎    图三 某东    图四 某拉

上图适配做的最好的是某东,但仔细看仍会有一点错位,但输入框的颜色,淡化了这种不和谐感。


为解决这个问题就要搞清楚原理

这是在没有设置自定义时的原生导航栏,我们发现整体的高度就是 (状态栏高度 + 导航栏高度)

而状态栏高度可以通过 wx.getSystemInfo()获取,现在就只用解决导航栏高度了

观察发现,胶囊顶部高度距导航栏顶部高度的高度差 和 胶囊底部高度距导航栏底部高度的高度差,是一样的

也就是说 导航栏高度 = 胶囊高度 +(高度差)x  2

而胶囊信息可以通过 wx.getMenuButtonBoundingClientRect() 获取,现在就只用解决高度差了

wx.getMenuButt

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嫣嫣细语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值