微信小程序navigationStyle设置为custom后，如何解决适配问题？

Question

在不同的手机中，胶囊到屏幕顶端的距离是不同的，为了让自定义的搜索框和胶囊对齐，我在header组件的attached事件中获取了胶囊的位置：

wx.getMenuButtonBoundingClientRect()

然后通过一些计算，算出header组件的padding-top:

但是在有些手机中这样不起作用(由于没有测试机，不清楚是哪里的位置或者高度没有获取到)。

请教有什么其他的好的适配方法吗？

Answer 1

适配思路是对的。

wx.getMenuButtonBoundingClientRect 这个方法需要基础库大于等于 2.1.0 才可以支持。

如果你没在后台设置允许的最低版本，用户可能使用的比这个版本低的导致不能正确取值。

另外官方在开发者社区中曾建议在组件的 ready、页面的 onShow 等生命周期中调用此方法，防止因时序问题带来的影响。

另外建议设个最小值而不要用 0 做兜底，像状态栏最小高度应该是 16px，胶囊按钮的 bottom 最小值应该是 58px（即标题栏最小高度是 58-16=42px）。这些都是非异形屏的最小值了，各种刘海屏挖孔屏的取值只会比这个大。