Java教程

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设置页面背景颜色的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!