uniapp获取各平台(含小程序)状态栏和标题栏高度

最新推荐文章于 2024-01-09 09:30:59 发布

Web项目开发

最新推荐文章于 2024-01-09 09:30:59 发布

阅读量3.2k

点赞数 2

文章标签：小程序 uni-app 微信小程序

本文链接：https://blog.csdn.net/mark885/article/details/126682556

版权

先看图片中的位置区域
微信小程序小胶囊

获取方法示例代码

data: {
  statusBarHeight: 0, //状态栏高度，单位：px
  titleBarHeight: 0, //标题栏高度，单位：px
  headerHeight:0 , //页面头部高度，单位：px
}

onLoad() {
   //1.得到 状态栏高度，单位：px
   this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
   /* 或：
   const SystemInfo = wx.getSystemInfoSync();
   this.statusBarHeight = SystemInfo.statusBarHeight;
   */
 },
 
 onReady() {
   //2.计算 标题栏高度，单位：px，计算公式：小胶囊高度 + (顶部距离 - 状态栏高度) * 2
   this.titleBarHeight = (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
     uni.getMenuButtonBoundingClientRect().height;
   //3.计算 页面头部高度，单位：px，计算公式：导航栏高度 + 状态栏高度
   this.headerHeight = this.statusBarHeight + this.titleBarHeight;
 }
 
 
<!-- - Style动态绑定01 -->
<view :style="{'top':`${statusBarHeight}px`}"></view>


<!-- - Style动态绑定02 -->
<view :style="[viewHeight()]">
computed: {
    //Style动态绑定02
	viewHeight() {
		let that = this;
		console.log('状态栏高度：',that.statusBarHeight);
		console.log('导航栏高度：',that.titleBarHeight);
	    return () => {
	        let that = this, n = that.statusBarHeight + that.titleBarHeight; //状态栏高度+导航栏高度
	        return Object.assign({}, {
	            top: n + 'px',
	        })
	    }
	}
}