uniapp 顶部滑动状态栏加背景色

<view :style="{ height: iStatusBarHeight + 'px'}" class="stat" v-show="isShowBarHeight"></view>

变量

isShowBarHeight:false, // 头部是否展示背景色
iStatusBarHeight:0,

方法

onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			if(e.scrollTop != 0) {
				this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
				this.isShowBarHeight = true;
			}else{
				this.isShowBarHeight = false;
			}
		},

样式

.stat{
			background-color: #3478FF;
			// color: white;
			position: fixed;
			z-index: 99;
			height: var(--status-bar-height); // --status-bar-height系统状态栏高度
			width: 100%;
			top: 0;
			left: 0;
		}