原文链接:
/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}})