uni-app获取状态栏高度

  • 众所周知uniapp的状态栏高度是用css变量去识别的
<template>
    <view>
        <view class="status_bar">
        	//这里是状态栏
        </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);	//这里是状态栏css变量
        width: 100%;
    }
</style>
  • 但是要在js里面去操作高度的话是比较麻烦的
  • 这里提供一个简单的js去获取状态栏的高度

onLoad:

onLoad() {
	this.GetStatusBarHeight();
},

methods:

methods: {
	GetStatusBarHeight() {
		let that = this;
		wx.getSystemInfo({
			success: function(res) {
				res.statusBarHeight; //这就是状态栏的高度
			},
		});
	},
}

你可能感兴趣的:(uni-app,JavaScript,css,uni-app)