在uniapp中,给当前页面添加满屏背景颜色,然后设置背景颜色,常见的有几种方式
1、给当前组件的根元素添加绝对定位,宽高百分百
缺点:内容过长,无法滚动。补救方式只能改变dom结构,但还是会失去uniapp自带的滚动方法
.view{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom,#FFE2E8,#F4F4F4);
z-index: -1;
}
2、给当前组件的根元素添加min-height:100vh
缺点:在h5上会出现滚动条。补救方式只能用样式去掉滚动条,但还是会有多出来的一点点高度
.view{
min-height:100vh;
background: linear-gradient(to bottom,#FFE2E8,#F4F4F4);
z-index: -1;
}
3、给当前组件添加page样式
缺点:在h5上根元素也会出现样式。如果背景颜色有渐变色或者透明色,就会颜色重叠,在其它环境反而正常。补救方式自己去想
注意别加scoped,否则无效
<style>
page{
background: linear-gradient(to bottom,#FFE2E8,#F4F4F4);
}
</style>
互有优劣,自行选择