评论

自定义导航--wx.getMenuButtonBoundingClientRect() 万机兼容

wx.getMenuButtonBoundingClientRect()

官方文档:

自定义导航使用此接口做css参数定位,部分机型无法获取,或者说是无法及时获取到参数,导致导航栏定位出错,下图:

采用过的方案:
每个需要自定义导航的页面重新get,不行;
默认一个初始值,不行;

在交流群里有个大佬后来给了一个优化方案,代码如下:
wx.getSystemInfo({
success: e => {
let custom = wx.getMenuButtonBoundingClientRect();
if (!custom[‘top’] || !custom[‘bottom’]) {
that.setTimeout(() => {
custom = wx.getMenuButtonBoundingClientRect();
console.log(custom, ‘3’, ‘延迟200毫秒之后’)
that.globalData.StatusBar = e.statusBarHeight;
that.globalData.Custom = custom;
that.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
that.globalData.ScreenHeight = e.screenHeight;
that.globalData.ScreenWidth = e.screenWidth
}, 2 * 100);
}
console.log(custom, ‘2’)
that.globalData.StatusBar = e.statusBarHeight;
that.globalData.Custom = custom;
that.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
that.globalData.ScreenHeight = e.screenHeight;
that.globalData.ScreenWidth = e.screenWidth

  }
});
 通过接口获取参数,如果没有获取到 进入一个定时缓冲区,这个区域的目的就是延迟赋值。
 调整后如下:

下方为小程序,开发者们可以继续试一试,看看是否有这种情况。![ ]

希望官方能解决一下 或者 文档写的明一点.

最后一次编辑于  07-04  
点赞 0
收藏
评论

1 个评论

  • 社区产品经理-汤尼
    社区产品经理-汤尼
    07-04
    请发布于“问题解答”版块。
    07-04
    赞同
    回复 1
    • 鄙人乃赵大人
      鄙人乃赵大人
      07-04

      啊,不应该是经验分享吗

      07-04
      回复