コードは以下のように表示されます
<view :style="{ 'margin-top': `${statusBarHeight}px` }"></view>
data(){
return{
titleBarHeight: '',
statusBarHeight: '',
}
}
mounted() {
// 导航栏距顶距离
let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点。
uni.getSystemInfo({
//获取系统信息
success: res => {
let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+(菜单按钮与顶部距离-状态栏高度)*2
this.titleBarHeight = navHeight;
this.statusBarHeight = res.statusBarHeight;
// 导航栏高度
console.log(this.titleBarHeight);
// 导航栏距顶高度
console.log(this.statusBarHeight);
},
fail(err) {
// console.log(err);
}
});
},