博客

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

  • Post author:
  • Post category: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
		}
	}
},


版权声明：本文为qq_44540152原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。