微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度

一、微信小程序顶部导航栏自定义

"navigationStyle": "custom" 

app.json

[code] "window": {
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "标题",
"navigationBarTextStyle": "black",
"navigationStyle": "custom"
},

二、根据不同手机自适应距离状态栏高度

2.1、首先在app.js里面获取状态栏高度，并存储为全局变量

获取系统信息wx.getSystemInfo(Object object)

[code]wx.getSystemInfo({
success: function (res) {
that.globalData.statusBarHeight = res.statusBarHeight
}
console.log(res.statusBarHeight, 'statusBarHeight')
})

2.2、在所需页面里使用：

.js

[code]
//获取应用实例
const app = getApp();
page({
data: {
//获取全局变量 导航栏的高度statusBarHeight
statusBarHeight: getApp().globalData.statusBarHeight,
},
})

 .wxml

[code]<!-- 状态栏 -->
<view style='height: {{statusBarHeight}}px;'></view>
<!-- 标题栏 -->
<view style='height: 44px;'>标题</view>

 iphoneX

iphone7

ipadAir2