statusBar ---------- 状态栏高度
customBar -------- 状态栏高度 + 导航栏高度
1、建议在公共位置使用该段代码,以达到可以全局复用的效果。
这里我们存在store中,存在store中有个好处,就是能够实时变化。
避免uni.getSystemInfo()执行未完成时就渲染高度,而在uni.getSystemInfo()完成后无法实时变换高度。
2、这里又存在一个问题,直接使用this.$store.state.statusBar设置在布局标签上有时会不生效。
解决方法:
重新赋值给该页面自定义的变量,然后设置到布局标签上则能够成功。
话不多说直接上代码
uni.getSystemInfo({
success: (e: any) => {
// this.compareVersion(e.SDKVersion, '2.5.0')
let statusBar = 0
let customBar = 0]
// #ifdef MP
statusBar = e.statusBarHeight
customBar = e.statusBarHeight + 45
if (e.platform === 'android') {
this.$store.commit('SET_SYSTEM_IOSANDROID', false)
customBar = e.statusBarHeight + 50
}
// #endif
// #ifdef MP-WEIXIN
statusBar = e.statusBarHeight
// @ts-ignore
const custom = wx.getMenuButtonBoundingClientRect()
customBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
// #ifdef MP-ALIPAY
statusBar = e.statusBarHeight
customBar = e.statusBarHeight + e.titleBarHeight
// #endif
// #ifdef APP-PLUS
console.log('app-plus', e)
statusBar = e.statusBarHeight
customBar = e.statusBarHeight + 45
// #endif
// #ifdef H5
statusBar = 0
customBar = e.statusBarHeight + 45
// #endif
// 这里你可以自己决定存放方式,建议放在store中,因为store是实时变化的
this.$store.commit('SET_STATUS_BAR', statusBar)
this.$store.commit('SET_CUSTOM_BAR', customBar)
this.$store.commit('SET_SYSTEM_INFO', e)
}
})
注:只有小程序能够获得导航栏高度,app、H5是没有的,所以高度这两端的导航栏高度是设屎的45px
来源:CSDN
作者:qq_41231694
链接:https://blog.csdn.net/qq_41231694/article/details/103894927