1.获取状态栏高度
在app.js里面
globalData: {
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight']//获取状态栏高度
},
2.设置自定义导航栏标识
"window": {
"navigationStyle":"custom"
},
3.设置样式
在app.wxss里面
.custom{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
background: #2C5CFF;
z-index: 999;
display: flex;
align-items: center;
}
.custom text{
color: #fff;
font-size: 34rpx;
font-weight: 500;
max-width: 280rpx;
}
.empty_custom{
height: 45px;
width: 100%;
}
4.在页面自定义导航栏
在index.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>
5.在index.js取出statusBarHeight的值
Page({
data:{
statusBarHeight: app.globalData.statusBarHeight
}
})
基本上已经ok 不过会出现一个报错 app is not defined 还是没有出现状态栏
解决方案:在index.js顶部加上 var app = getApp(); 这样就好了…