uniapp小程序u-view实现顶部导航栏随高度改变而改变样式

效果如下：

20221019_111007

template内容：

		<image src="../../static/image/indexbj.png" mode="" class="bg_img"></image>
		<u-navbar title="信息收集" :background="backgroundObj" :title-color="titleColor" :border-bottom="false"
			:back-icon-color="backIconColor"></u-navbar>

data里return内容：

backgroundObj: {
					background: 'rgba(247, 247, 247, 0)',
				},
				titleColor: '#ffff',
				backIconColor: '#ffff',

methods方法：

methods: {
			onPageScroll(e) {
				//获取距离顶部距离
				const scrollTop = e.scrollTop;
				console.log("高度：", scrollTop)
				// 根据高度改变样式
				if (scrollTop < 99) {
					this.backgroundObj.background = 'rgba(247, 247, 247, 0)'
					this.titleColor = '#ffff'
					this.backIconColor = '#ffff'
				} else if (scrollTop >= 99 && scrollTop < 150) {
					this.backgroundObj.background = 'rgba(247, 247, 247, 0.5)'
					this.backIconColor = '#606266'
					this.titleColor = '#000'
				} else if (scrollTop >= 150) {
					this.backgroundObj.background = 'rgba(247, 247, 247, 1)'
					this.backIconColor = '#606266'
					this.titleColor = '#000'
				}
			},
			}