uniapp自定义头部下滑渐变案例 复制可用

uniapp自定义头部下滑渐变案例 复制可用用

uniapp 模板

<template>
	<view class="box">
		<view class="nav_bar" >	
			<view class="status_bar"><!-- 这里是状态栏 --></view>
			<view class="status_box">
				<!-- 这里是返回上一页 图片为监听 -->
				<image class="status_back" src="/static/ico_left.png" mode="widthFix" @click="backshouw"></image>
				<!-- 这里是标题 -->
				<view class=" status_title">
					<text class="status_title_txt">这里是标题</text>
					<image class="status_title_img" src="/static/icon/zdy_ss.png" mode="widthFix" @click="searchshow">
						<!-- 这里是搜索图标，点击切换为搜索栏 -->
					</image>
				</view>
			</view>	
		</view>
		<view class="nav_bar_1":style="bgcolor"><!-- 默认显示背景--></view>   
		<view class="nav_bar_2" :style="bgcolor_1"><!-- 渐变显示背景--></view>
		<view class="place_holder"><!-- 占位符--></view>
		<view class="list">
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
			<view class="list_view">内容</view>
		</view>
	</view>
</template>

uniapp css

.box{ width: 750rpx ; display: block;}
	.nav_bar {
		width: 750rpx;
		display: block;
		position: fixed;
		top: 0;
		z-index: 999;
		
		
	}
	.nav_bar_1 {
		width: 750rpx;
		display: block;
		position: fixed;
		top: 0;
		z-index: 998;
		background: #00a0e9;
		height: calc(var(--status-bar-height) + 44px);
		
	}
	
	.nav_bar_2{width: 750rpx;
		display: block;
		position: fixed;
		top: 0;
		z-index: 997;
		background: #f00;
		opacity: 0;
		height: calc(var(--status-bar-height) + 44px);
		
		}

	.place_holder {
		width: 750rpx;
		display: block;
		height: calc(var(--status-bar-height) + 44px);
	}

	/*状态栏*/
	.status_bar {
		height: var(--status-bar-height);
		width: 750rpx;
		display: block;
		
	}
	

	/*导航栏*/
	.status_box {
		width: 750rpx;
		height: 44px;
		
		display: flex;
		justify-content: flex-start;
		align-items: center;
		
	}

	.status_back {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin-left: 15rpx;
	}

	/*显示标题*/
	.status_title {
		width: 655rpx;
		height: 70rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-left: 15rpx
	}

	.status_title_txt {
		width: 590rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: block;
		margin-right: 15rpx;
		color: #fff;
		text-align: center;
	}

	.status_title_img {
		width: 50rpx;
		height: 50rpx;
		display: block;
		margin: auto;
	}

	.list{ width: 750rpx; display: block;}
	.list_view{ width: 720rpx; display: block; height: 500rpx;  line-height: 500rpx;
	 font-size: 60rpx; text-align: center; color: #fff;
	margin: auto; margin-top: 10rpx; border-radius: 10rpx; background-color: #00a0e9; }

uniapp javascript

export default {
		data() {
			return {
				bgcolor: ''
				
			};
		},
		methods: {

			// 通过这个方法,监听滑动的距离,通过距离,动态修改透明的
			onPageScroll(e) {
				if (e.scrollTop >= 0 && e.scrollTop <= 8) {
					this.bgcolor = "opacity:1"
					this.bgcolor_1 = "opacity:0"
				} else if (e.scrollTop > 8 && e.scrollTop <= 16) {

					this.bgcolor = "opacity:0.9"
					this.bgcolor_1 = "opacity:0.1"
				} else if (e.scrollTop > 16 && e.scrollTop <= 24) {
					this.bgcolor = "opacity:0.8"
					this.bgcolor_1 = "opacity:0.2"
				} else if (e.scrollTop > 24 && e.scrollTop <= 32) {
					this.bgcolor = "opacity:0.7"
					this.bgcolor_1 = "opacity:0.3"
				} else if (e.scrollTop > 32 && e.scrollTop <= 40) {
					this.bgcolor = "opacity:0.6"
					this.bgcolor_1 = "opacity:0.4"
				} else if (e.scrollTop > 40 && e.scrollTop <= 48) {
					this.bgcolor = "opacity:0.5"
					this.bgcolor_1 = "opacity:0.5"
				} else if (e.scrollTop > 48 && e.scrollTop <= 56) {
					this.bgcolor = "opacity:0.4"
					this.bgcolor_1 = "opacity:0.6"
				} else if (e.scrollTop > 56 && e.scrollTop <= 64) {
					this.bgcolor = "opacity:0.3"
					this.bgcolor_1 = "opacity:0.7"
				} else if (e.scrollTop > 64 && e.scrollTop <= 72) {
					this.bgcolor = "opacity:0.2"
					this.bgcolor_1 = "opacity:0.8"
				} else if (e.scrollTop > 72 && e.scrollTop <= 80) {
					this.bgcolor = "opacity:0.1"
					this.bgcolor_1 = "opacity:0.9"
				} else if (e.scrollTop > 80) {
					this.bgcolor = "opacity:0"
					this.bgcolor_1 = "opacity:1"
				}
			}
		},
		
		onLoad() {

			this.bgcolor = "opacity:1"
		}
	};

uniapp 效果如下

自定义头部渐变