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

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

"navigationStyle": "custom"

app.json

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

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

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

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

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

2.2、在所需页面里使用：

.js

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

.wxml

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

iphoneX

iphone7

ipadAir2

微信小程序顶部导航栏自定义 根据不同手机自适应距离状态栏高度 防止标题栏高度歪歪扭扭