习习2012
习习2012
  • 发布:2020-09-14 16:55
  • 更新:2021-05-27 17:46
  • 阅读:4816

微信小程序动态获取标题栏高度

分类:uni-app

之前开发小程序的时候,切换页面的时候,发现在IOS和安卓上,自定义标题栏和微信自带的高度不一样。

后来花了一个下午的时间,终于写出兼容的代码。当然在真机上是没有问题的。在微信开发工具模拟器上会出现不一样的问题,这个问题不大。

下面是代码 , CustomBar 代表标题栏加状态栏的高度,HeaderBar 代表 标题栏的高度

uni.getSystemInfo({  
    success: e => {  
        let StatusBar = e.statusBarHeight;  
        let rect = wx.getMenuButtonBoundingClientRect();  
        if (e.system.toLowerCase().indexOf('ios') > -1) {  
            //IOS  
            let CustomBar = rect.bottom + (rect.top - e.statusBarHeight) * 2;  
            let HeaderBar = CustomBar - e.statusBarHeight;  
        } else {  
            //安卓  
            let HeaderBar = rect.height + (rect.top - e.statusBarHeight) * 2;  
            let CustomBar = HeaderBar + e.statusBarHeight;  
        }  
    }  
});
2 关注 分享
以何为家 1***@163.com

要回复文章请先登录注册

以何为家

以何为家

赞一个
2021-05-27 17:46