目录

一、问题

二、设置全局变量

三、页面背景设置

四、效果展示

---

一、问题

在设置页面时直接设置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>

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

四、效果展示

可以看到不同的屏幕对应的高度也不一样。