小程序setNavigationBarColor设置背景渐变,图片渐变

小程序setNavigationBarColor设置背景渐变

第一种：渐变图片

html 复制代码
<view class="Box" :style="'height:'+s_topImg+'rpx'" >
			<!-- 设置背景图片及自适应高度 -->
			<view class="contain-box" :style="[{backgroundImage:'url('+backgroundImg+')'}, 'height:'+s_topImg+'rpx']" >
				<!-- 滚动动态设置样式 -->
				<view :class="scrollTopShow?'top-item1':'top-item2'":style="'background:rgba(48, 154, 236,' +topOpacity+')'">
					<!-- 胶囊以上占位盒子 -->
					<view :style="'height:'+s_top+'rpx', 'line-height:'+s_top+'rpx'"></view>
					<!-- 动态设置高和行高与胶囊保持一致 -->
					<view class="title-type" :style="['height:'+s_height+'rpx','line-height:'+s_height+'rpx']">
						项目订阅管理
					</view>
				</view>
			</view>
		</view>

<script>
	export default {
		data() {
			return {
				backgroundImg: '/subscribe/static/img/topbg1.jpg', // 顶部背景图
				s_top: '100', //胶囊距离顶部距离
				s_height: '100', //胶囊行高	
				s_topImg: '80',
				scrollTopShow: true, // 顶部颜色默认隐藏
				topOpacity: 0,
			}
		},
		created() {
			this.initTopImg();
		},
		// 监听滚动事件
		onPageScroll(e) { //nvue暂不支持滚动监听，可用bindingx代替
			let scrollTop = e.scrollTop;
			this.topOpacity = scrollTop / 300 > 0.9 ? 1 : scrollTop / 300
			if (e.scrollTop != 0) {
				this.scrollTopShow = false;
			} else {
				this.scrollTopShow = true;
			}
		},
		methods: {
			// 初始化顶部背景图
			initTopImg() {
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				this.s_top = menuButtonInfo.top * 2;
				this.s_topImg = menuButtonInfo.top * 2+100 ;//+ 508
				this.s_height = menuButtonInfo.height * 2;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}
	.Box{
		position: sticky;
		    top: 0;
		    z-index: 100;
	}
	.contain-box {
			width: 100%;
			background-size: 100% 100%;
			align-items: center;
	
			.top-item1 {
				.title-type {
					font-size: 36rpx;
					font-weight: 400;
					color: #fff;
					display: flex;
					justify-content: center;
					/* 水平居中 */
				}
			}
	
			.top-item2 {
				position: fixed;
				top: 0;
				width: 100%;
	
				.title-type {
					font-size: 36rpx;
					font-weight: 400;
					color: #fff;
					display: flex;
					justify-content: center;
					/* 水平居中 */
				}
			}
		}
	.top{
	   width: 100%;
	   height: 200px;
	   background: linear-gradient(121deg, #94C7FE -1%, #1890FF 102%);
	   box-shadow: 24px 52px 100px 0px rgba(90, 108, 234, 10%)
	}

	.setting{
		.header {
			background: linear-gradient(135deg, #007aff 0%, #0056d6 100%);
			color: white;
			padding: 20px 16px;
			text-align: center;
			// position: sticky;
			// top: 0;
			z-index: 100;
			box-shadow: 0 2px 10px rgba(0, 122, 255, 0.2);
		}
		
		.header h1 {
			font-size: 1.25rem;
			font-weight: 600;
			margin-bottom: 4px;
		}
		
		.header p {
			font-size: 0.875rem;
			opacity: 0.9;
		}
		
		.main {
			padding: 16px;
			padding-bottom: 100px;
		}
		
		.list {
			background: white;
			border-radius: 12px;
			margin-bottom: 16px;
			padding: 16px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
			transition: all 0.3s ease;
		}
		
		.list:active {
			transform: scale(0.99);
		}
		
		.first {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;
		}
		
		.title {
			font-size: 1.125rem;
			font-weight: 600;
			color: #2c3e50;
		}
		
		.subtitle {
			font-size: 0.75rem;
			padding: 4px 10px;
			border-radius: 10px;
			font-weight: 500;
		}
		
		/* 分类标识颜色 - 使用主题色变体 */
		.color1 {
			background-color: rgba(0, 122, 255, 0.1);
			color: #007aff;
		}
		
		.color2 {
			background-color: rgba(0, 122, 255, 0.15);
			color: #0062cc;
		}
		
		.color3 {
			background-color: rgba(0, 122, 255, 0.2);
			color: #0052b3;
		}
		
		.content {
			margin: 12px 0;
			padding: 12px;
			background: #f9f9f9;
			border-radius: 8px;
		}
		
		.second {
			display: flex;
			flex-direction: column;
		}
		
		.secondTip {
			font-weight: 600;
			color: #2c3e50;
			margin-bottom: 8px;
			font-size: 0.875rem;
		}
		
		.secondList {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
		}
	
	}

	
</style>
2. 渐变颜色

<uni-icons type="left" size="25" @click="goBack" class="iconback">
项目订阅管理