微信小程序——滚动渐变的顶部导航栏

这篇文章主要介绍了在小程序端怎么实现导航栏滚动渐变效果,本文通过实例代码给大家介绍，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

效果图

星巴克用星说小程序首页为例，首页打开时导航栏隐藏，当鼠标往下滚动时导航栏逐渐显示，当鼠标往上滚动时导航栏逐渐消失。

代码区（以uniapp为例）

1.导航栏HTML

<template>
	<view>
		<view class="title" :style="{opacity:titleOpacity}">星巴克用星说</view>
		<view class="outer">

		</view>
	</view>
</template>

2.导航栏CSS

.outer {
		width: 100%;
		height: 1867rpx;
		background: url('../static/bg.png') no-repeat;
		background-size: 100% 100%;
	}

	.title {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		padding-top: 50rpx;
		background-color: #fff;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 34rpx;
	}

3.滚动js实现

<script>
	export default{
		data(){
			return{
				titleOpacity:0
			}
		},
		// 页面滚动监听
		onPageScroll(e){		
			// num决定滚动时导航栏显示的快慢
			let num = 160;
			let r = e.scrollTop  / num;
			this.titleOpacity = r>=1?1:r;
		},
	}
</script>

总结

刚开始在小程序端看到这个效果，最开始的思路是通过滚动时v-if去控制它的显示隐藏，但仔细一看肯定人家肯定不是这样实现的，我看到很多人想到滚动时给它添加动画属性（animation）去实现它我试了下看起来效果还是差点意思，所以想还是控制盒子的opacity值效果最好。