uni-app 状态栏没有显示 滚动页面超出导航栏

出现以下问题是因为：状态栏存在于页面以内

解决办法，给状态栏设置定位

// 基础部件
<view class="status_bar"></view>

// 样式
<style>
	/* 自动计算状态栏高度 */
	.status_bar {
	      height: var(--status-bar-height);
	      width: 100%;
		  position: fixed;
		  top: 0;
		  background: red;
		  z-index: 999;
	  }
</style>

设置之后依然没有显示状态栏，是因为没有给状态栏让出位置，给页面顶部设置样式 top 为状态栏高度

top: var(--status-bar-height);