uniapp获取手机状态栏和头部导航栏高度(可用于制作头部自定义导航栏)

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

你可能感兴趣的:(小程序,vue,web,app)