uniapp获取导航栏高度

最新推荐文章于 2024-09-18 18:51:07 发布

qq_58633794

最新推荐文章于 2024-09-18 18:51:07 发布

阅读量1.4k

点赞数 6

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_58633794/article/details/133633754

版权

本文介绍了在uni-app项目中获取设备状态栏高度、定制栏高度的方法，并针对不同平台进行了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uni.getSystemInfo({
			    success: (e) => {
			      // this.compareVersion(e.SDKVersion, '2.5.0')
			      let statusBar = 0  //状态栏高度
			      let customBar = 0  // 状态栏高度 + 导航栏高度  
			      let navbar = 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
			      const custom = wx.getMenuButtonBoundingClientRect()
			      customBar = custom.bottom + custom.top - e.statusBarHeight
			 
			      navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
			      // #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
				that.statusBar=statusBar;
			    }
			})