小程序自定义导航栏安卓和苹果全面屏不兼容--转载

原文链接:
https://blog.csdn.net/fall_in_love_with/article/details/97115125?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-2

以下是代码
在app.js里面

App({
globalData: {
   statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
  }
})

在需要的页面的onload里面

// 获取系统状态栏信息
wx.getSystemInfo({
 success: e => {
   this.globalData.StatusBar = e.statusBarHeight;
   this.globalData.CustomBar = e.platform == 'android' ? e.statusBarHeight + 50 :                    e.statusBarHeight + 45;
}
});
},

Wxml 自定义顶部栏view结构加上

style="padding-top:{{statusBarHeight}}px"  //在wxml 获取顶部的高度

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
   <text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

也可以在app.js中设置一个公共样式 （自己决定）

.custom{
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 height: 45px;
 background: #2C5CFF;
 z-index: 999;
}
.custom text{
 color: #fff;
 font-size: 34rpx;
 font-weight: 500;
 max-width: 280rpx;
}
.empty_custom{
 height: 45px;
 width: 100%;
}

在index.js中取出statusBarHeight值

Page({
data:{
   statusBarHeight: app.globalData.statusBarHeight
 }
})