微信小程序 导航栏背景色 随滚动条滚动而变化

//app.json 添加 (json 文件不能有注释)
"navigationStyle": "custom"

<view class="app">

	<view class="nav-top" style="padding-top: {{ statusBarHeight }}px; background-color: rgb(45, 183, 245, {{num}})">
		<view class="nav-top-img-view" bindtap="onBack">
			<image src="../../img/icons/arrow-left-bold.png"></image>
		</view>
	
		<view class="nav-top-title">标题</view>
		<view class="nav-top-img-view"></view>
	</view>
	
	<view class="list" style="padding-top: {{ statusBarHeight + 45 }}px">
		<view class="list-item">1</view>
		<view class="list-item">2</view>
		<view class="list-item">3</view>
		<view class="list-item">4</view>
		<view class="list-item">5</view>
	</view>
	
</view>

.nav-top{
  position: fixed;
  top: 0;
	left: 0;
	height: 45px;
	width: 100%;
	/* opacity: .5; */
	display: flex;
	flex-direction: row;
}

.nav-top-img-view {
	height: 45px;
	width: 45px;
}

.nav-top image {
	height: 20px;
	width: 20px;
	margin: 12.5px;
}

.nav-top-title {
	font-weight: bolder;
	text-align: center;
	line-height: 45px;
	flex: 1;
}

.list { 
	
}

.list-item {
	height: 50vh;
	margin: 20rpx;
	background-color: #ededed;
}

Page({
	data: {
		statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
		num: 0
	},

	onPageScroll (e) {
		if (e.scrollTop < 500) {
			this.setData({
				num: e.scrollTop / 500
			})
		} else {
			this.setData({
				num: 1
			})
		}
	},

})

---

• 小程序官方并不推荐频繁 setData
• 不过 iPhone 6s 上体验很流畅，所以暂时忽略，有更好的方案再更新

---

喜欢或对你有帮助，请点个赞吧 。

有错误或者疑问还请评论指出。

我的个人网站 --> 点击访问 。

---

END