解决uniapp用了uni.getSystemInfo获取状态栏高度在app上获取不到问题

出现的情况

刚开始写法 是用了

    uni.getSystemInfo({
                success:(e)=> {    
                this.statusBarHeight = e.statusBarHeight;
              }
            })

<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>

解决问题的效果

 

第一种把那些方法不写在onLoad里面写在mounted里面就可以了

 

<template>
    <view class="main" :style="{marginTop:statusBarHeight+'px'}">
        {{statusBarHeight}}
     <view>测试</view>
    
    </view>
</template>
 
<script>
    export default {
        name:"app-navbar",
        mounted(){
            uni.getSystemInfo({
                success:(e)=> {    
                this.statusBarHeight = e.statusBarHeight;
              }
            })
                 console.log(this.statusBarHeight,'-')
        },
        data() {
            return {
                statusBarHeight:0,
            };
        },
    }
</script>
 
<style scoped lang="scss">
.main{
    
}
</style>

 

 

第二种是用了css识别法  var(--status-bar-height)

 

<template>
    <view class="main" style="margin-top:  var(--status-bar-height);">
    <view>测试</view>
    
    </view>
</template>
 
<script>
    export default {
        name:"app-navbar",
        onLoad(){
 
        },
 
        data() {
            return {
            
            };
        },
        methods:{
    
        }
    }
</script>
 
<style scoped lang="scss">
.main{
    
 
}
</style>

 

 

如果需要用到状态栏高度

可以这样获取到

 

<template>
    <view id="main" style="margin-top: var(--status-bar-height);">
        <view>测试</view>
        状态栏高度{{statusBarHeight}}
    </view>
</template>
 
<script>
    export default {
        name: "app-navbar",
        mounted() {
            const query = uni.createSelectorQuery().in(this);
            query.select('#main').boundingClientRect(data => {
                console.log("得到布局位置信息" + JSON.stringify(data));
                console.log("节点离页面顶部的距离为" + data.top);
                this.statusBarHeight = data.top
            }).exec();
        },
 
        data() {
            return {
                statusBarHeight: 0,
            };
        },
        methods: {
 
        }
    }
</script>
 
<style scoped lang="scss">
    .main {}
</style>