uniapp实现导航栏随着滚动淡入淡出效果

实现思路:默认导航栏其实一直存在,只需初始时把导航栏透明度设为0,随着滚动,改变透明度即可

onPageScroll(res) {
    
    
	//获取距离顶部距离
	const scrollTop = res.scrollTop;
	if (scrollTop >= 0) {
    
    
		// 导航条颜色透明渐变
		if (scrollTop <= 20) {
    
    
			this.opacityNum = 0
		} else if (20 < scrollTop && scrollTop <= 100) {
    
    
			this.opacityNum = scrollTop / 100
		} else if (scrollTop > 100) {
    
    
			this.opacityNum = 1
		}
	}
},

猜你喜欢

转载自blog.csdn.net/qq_44540152/article/details/119409586
今日推荐