uniapp使用Uview的Navbar自定义微信小程序顶部导航栏，滚动渐变透明效果；看完不会我下跪-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp使用Uview的Navbar自定义微信小程序顶部导航栏，滚动渐变透明效果；看完不会我下跪。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

话不多说先看三张效果图

u-navbar在小程序,uni-app,微信小程序,小程序

文章来源地址https://www.toymoban.com/news/detail-855423.html

代码展示，直接复制就行，叫我雷锋同志

// is-back=false 去除默认左侧按钮文字
// immersive="true"为沉浸式 true则不占位置，文章主题内容会上升
// background传递的背景色 绑定boxStyle（自取名）（关键）
<u-navbar :is-back="false" title='首页' :background="boxStyle" :immersive="true" :border-bottom="false">
			//下面按自己需求写
	<view class="slot-wrap">
		<view style="width: 150px; background-color: #f6f7f9; color: #000;">左侧空间150px</view>
	</view>
</u-navbar>
		........
		data() {
			return {
	
				boxStyle: {
				// 上面的boxStyle名字无所谓
				// 下面的backgroundColor 我就不多说了
					backgroundColor: 'transparent'
				// 如果要其他效果参考官方给出
				// 导航栏背景图
				// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',
				// 渐变色
				// backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				}, 
			}
		}
		.......
		// onLoad同级，监听页面滚动
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			// 当滚动小于等于120px时
			if (scrollTop <= 120) {
				const opacity = scrollTop / 100 // 计算透明度值
				const color = `rgba(255, 255, 255, ${opacity})`
				this.boxStyle.backgroundColor = color // 更新盒子背景颜色
			} 
			// 大于120px时，设置为白色实体
			else {
				this.boxStyle.backgroundColor = '#ffffff'
			}
		},
		// pages.json
"pages": [	
// navbar-自定义导航栏	
{		"path": "/pages/navbar/index",
   		"style": {"navigationStyle":"custom" ,
// 隐藏系统导航栏
"navigationBarTextStyle": "white"
 // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一		
 
 }	}]