uni-app背景设置为渐变色出现断层现象的解决方法_uniapp nvue 渐变背景

背景设置为渐变色

<style>
	page {
		background: linear-gradient(to bottom right, #191A2C, #514B67);
	//从左上到右下颜色逐渐变浅
	}
</style>
1
2
3
4
5
6

如果此时页面内容没有到底部的话会成这个样子

有很明显的断层，体验不好

优化方法

1.先给页面设置固定宽度

<style>
	page {
		height: 1250rpx;//试了一下刚好铺满页面
		background: linear-gradient(to bottom right, #191A2C, #514B67);
	}
</style>
1
2
3
4
5
6

2.再在页面中加入一个scrollview并使其纵向可滑

<scroll-view class="school_group2" scroll-y="true" :show-scrollbar="true">
...
<scroll-view>
1
2
3

3.最后给scrollview一个合适的宽度

.school_group2 {
			height: 830rpx;
}
1
2
3

这样上下滑动的时候就只会滑动scrollview而不是滑动页面了