解决uniapp获取小程序顶部栏，app上不可以，小程序上可以

最新推荐文章于 2024-06-19 20:53:45 发布

SY_FC

最新推荐文章于 2024-06-19 20:53:45 发布

阅读量337

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/FUFCY/article/details/125002797

版权

出现问题的效果

开始代码：

用了：

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>