出现问题的效果
开始代码:
用了:
uni.getSystemInfo({
success:(e)=> {
this.statusBarHeight = e.statusBarHeight;
}
})
在app上状态栏获取不到状态栏高度,小程序是可以,这个我们很头疼
<template>
<view class="main" :style="{marginTop:statusBarHeight+'px'}">
{{statusBarHeight}}
<view>测试</view>
</view>
</template>
<script>
export default {
name:"app-navbar",
onLoad(){
uni.getSystemInfo({
success:(e)=> {
this.statusBarHeight = e.statusBarHeight;
}
})
console.log(this.statusBarHeight,'-')
},
data() {
return {
statusBarHeight:0,
};
},
}
</script>
<style scoped lang="scss">
.main{
}
</style>
解决问效果
用法是不是用
uni.getSystemInfo({
success:(e)=> {
this.statusBarHeight = e.statusBarHeight;
}
})
而是给最外层盒子加上
style="margin-top: var(--status-bar-height);"
<template>
<view class="main" style="margin-top: var(--status-bar-height);">
<!-- {{statusBarHeight}} -->
<view>测试</view>
</view>
</template>
<script>
export default {
name:"app-navbar",
onLoad(){
uni.getSystemInfo({
success:(e)=> {
this.statusBarHeight = e.statusBarHeight;
}
})
console.log(this.statusBarHeight,'-')
},
data() {
return {
statusBarHeight:0,
};
},
}
</script>
<style scoped lang="scss">
.main{
}
</style>