评论

自定义导航--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

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

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

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

点赞 0
收藏
评论

1 个评论

  • 技术产品专员-汤尼
    技术产品专员-汤尼
    2019-07-04
    请发布于“问题解答”版块。
    2019-07-04
    赞同
    回复 2
    • 大海
      大海
      2019-07-04

      啊,不应该是经验分享吗

      2019-07-04
      回复
    • 蓝山
      蓝山
      2021-04-22
      不知道为什么好多东西都写的模模糊糊的  然后需要自己去尝试 去看网友如何解决的
      2021-04-22
      回复
登录 后发表内容