Uniapp 设置全局背景100%高度的方法

最新推荐文章于 2025-05-26 10:58:47 发布

Dragon Wu

最新推荐文章于 2025-05-26 10:58:47 发布

阅读量6k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Uniapp 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.youkuaiyun.com/qq_50909707/article/details/124512912

Uniapp 专栏收录该内容

28 篇文章

订阅专栏

本文档介绍如何解决在uni-app中设置页面背景高度无效的问题。通过在App.vue中利用onLaunch事件获取屏幕信息，并设置全局变量globalData来存储屏幕高度，减去tabbar高度。然后在页面组件中引用这个全局变量，动态设置背景视图的高度，实现不同屏幕适配的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题

在设置页面时直接设置100%是不起作用的，网上找了好多资料都不行，预上个人就从全局变量入手来设置背景高度。

二、设置全局变量

这里注意在App.vue里进行添加全局变量时，此时getApp()还未生成，可以用this.globalData来设置全局变量。因为我这里用来tabbar所以要减去tabbar的高度。

<script>
	export default {
		globalData: {},
		onLaunch: function() {
			console.log('App Launch');
			uni.getSystemInfo({ //设置屏幕高度
				success: res => {
					//减去tabbar的高度，默认为50px
					this.globalData.screenHeight = res.screenHeight - 50;
				}
			})
		},
		onShow: function() {
			console.log('App Show');
		},
		onHide: function() {
			console.log('App Hide');
		}
	}
</script>

三、页面背景设置

<view class="profile backgroud-one" :style="'height:'+screenHeight+'px'">
{{screenHeight}}
</view>

<script>
	export default {
		data() {
			return {
				screenHeight: getApp().globalData.screenHeight
			}
		}
	}
</script>

这样便可以设置页面高度的背景了。