uniapp设置页面背景颜色

本文主要是介绍uniapp设置页面背景颜色，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

在uniapp中，给当前页面添加满屏背景颜色，需要给当前组件的根元素添加绝对定位，宽高百分百，然后设置背景颜色

<template>
	<view class="loginContent">
		<view class="logo">
			<image src="../../static/QTDD.jpg"></image>
		</view>

		<input type="text" v-model="email" placeholder="邮箱" />
		<input type="password" v-model="password" placeholder="密码" />
		<button class="btn">登录</button>
		<view class="alertNative">
			<view class="retrievePassword">找回密码</view>
			<view class="register">注册</view>
		</view>
	</view>
</template>
<style>
.loginContent{
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #ffdde1, #ee9ca7);
}
//其他不相关的CSS省略....
</style>

自己写的时候遇到的几种问题：

第一种：直接给当前组件的根元素添加背景颜色，会导致背景颜色只会出现在内容区域，不会满屏显示

<template>
	<view class="loginContent">
		//省略部分代码
	</view>
</template>
<style>
.loginContent{
background: linear-gradient(to bottom, #ffdde1, #ee9ca7);
}
//其他不相关的CSS省略....
</style>

第二种：给当前组件根元素添加height:100vh，然后添加背景颜色，这种方式虽然能达到效果，但是此时屏幕会出现滚动条，这种体验感不太好

<template>
	<view class="loginContent">
		//省略部分代码
	</view>
</template>
<style>
.loginContent{
height:100vh;
background: linear-gradient(to bottom, #ffdde1, #ee9ca7);
//其他不相关的CSS省略....
</style>
}

第三种：在当前组件中给page添加背景颜色，这种方式也能达到效果，但是组件根元素会继承背景颜色，导致背景颜色重叠了

<template>
	<view class="loginContent">
		//省略部分代码
	</view>
</template>
<style>
page{
	background: linear-gradient(to bottom, #ffdde1, #ee9ca7);	
//其他不相关的CSS省略....
}
</style>
}

这篇关于uniapp设置页面背景颜色的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！