uniapp顶部标题栏从透明到显示

uniapp顶部标题栏从透明到显示

<view :bgColor="topBg">
	<view class="mine-name" style="font-size: 36rpx;" :style="{color: topColor}">
		顶部导航
	</view>
</view>

// js部分------------------------------------------------
data() {
	return {
		topBg: 'rgba(255, 255, 255, 0)',
		topColor: 'rgba(0, 0, 0, 0)',
	}
}
// 监听页面滚动
onPageScroll(res){
	// 160的高度
	let num = 0.00625*res.scrollTop
	if(num > 1){
		num = 1
	}else{
		num = num.toFixed(2)
	}
	if(num > 0){
		this.displayStr = 'block'
	}else{
		this.displayStr = 'none'
	}
	
	this.topBg = 'rgba(255, 255, 255,' + num +')';
	this.topColor = 'rgba(0, 0, 0,' + num +')';
},
// 监听页面触底
onReachBottom(){
	this.topBg = 'rgba(255, 255, 255, 1)';
	this.topColor = 'rgba(0, 0, 0, 1)';
},