uni-app背景设置为渐变色出现断层现象的解决方法
背景设置为渐变色
<style>
page {
background: linear-gradient(to bottom right, #191A2C, #514B67);
//从左上到右下颜色逐渐变浅
}
</style>
如果此时页面内容没有到底部的话会成这个样子
有很明显的断层,体验不好
优化方法
1.先给页面设置固定宽度
<style>
page {
height: 1250rpx;//试了一下刚好铺满页面
background: linear-gradient(to bottom right, #191A2C, #514B67);
}
</style>
2.再在页面中加入一个scrollview并使其纵向可滑
<scroll-view class="school_group2" scroll-y="true" :show-scrollbar="true">
...
<scroll-view>
3.最后给scrollview一个合适的宽度
.school_group2 {
height: 830rpx;
}
这样上下滑动的时候就只会滑动scrollview而不是滑动页面了