【报Bug】刘海屏自定义导航栏uni-nav-bar状态栏被穿透

示例代码：

<template>  
  <view class="content">  
    <view class="status_bar"></view>  
    <!-- 导航栏 -->  
    <view  
      class="navbar"  
      :class="{ 'el-hidden': !showHeader }"  
    >  
      <!-- 禁止滚动穿透 不占位 -->  
      <page-meta  
        :page-style="'overflow:' + (isLockRollThrough ? 'hidden' : 'visible')"  
      ></page-meta>  

      <uni-nav-bar  
        left-icon="arrow-left"  
        fixed  
        :border="false"  
        :title="title"  
        :height="50"  
        @clickLeft="handleClickLeft"  
      />  
    </view>  
    <view  
      class="header"  
      :class="{ 'el-hidden': !showHeader }"  
    >  
      <text class="city-management">城市管理</text>  
    </view>  
    <view class="search">  
      <uni-search-bar  
        :class="{ uniSearchBarTop: showHeader }"  
        radius="20"  
        :placeholder="searcHPlaceholder"  
        clearButton="auto"  
        cancelButton="auto"  
        @focus="handleClickSerchBar"  
        @cancel="handleCancelSearch"  
      />  
    </view>  
    <view>  
      <scroll-view  
        style="height: 100vh"  
        scroll-y="true"  
      >  
        <view class="uni-padding-wrap uni-common-mt">  
          <button type="primary">页面主操作 Normal</button>  
          <button  
            type="primary"  
            loading="true"  
          >  
            页面主操作 Loading  
          </button>  
          <button  
            type="primary"  
            disabled="true"  
          >  
            页面主操作 Disabled  
          </button>  
          <button type="default">页面次要操作 Normal</button>  
          <button  
            type="default"  
            disabled="true"  
          >  
            页面次要操作 Disabled  
          </button>  
          <button type="warn">警告类操作 Normal</button>  
          <button  
            type="warn"  
            disabled="true"  
          >  
            警告类操作 Disabled  
          </button>  
          <view class="button-sp-area">  
            <button  
              type="primary"  
              plain="true"  
            >  
              按钮  
            </button>  
            <button  
              type="primary"  
              disabled="true"  
              plain="true"  
            >  
              不可点击的按钮  
            </button>  
            <button  
              type="default"  
              plain="true"  
            >  
              按钮  
            </button>  
            <button  
              type="default"  
              disabled="true"  
              plain="true"  
            >  
              按钮  
            </button>  
            <button  
              class="mini-btn"  
              type="primary"  
              size="mini"  
            >  
              按钮  
            </button>  
            <button  
              class="mini-btn"  
              type="default"  
              size="mini"  
            >  
              按钮  
            </button>  
            <button  
              class="mini-btn"  
              type="warn"  
              size="mini"  
            >  
              按钮  
            </button>  
          </view>  
        </view>  
      </scroll-view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      title: "",  
      showHeader: true,  
      uniSearchBarTop: "uni-mt-10", //  
      isLockRollThrough: false,  
      searcHPlaceholder: "搜索位置",  
    };  
  },  
  methods: {  
    handleClickSerchBar() {  
      this.showHeader = false;  
      this.isLockRollThrough = true;  
      this.searcHPlaceholder = " ";  
      uni.showToast({  
        title: "点击了搜索框",  
        icon: "none",  
        image: "",  
        duration: 1500,  
        mask: false,  
        success: (result) => {},  
        fail: () => {},  
        complete: () => {},  
      });  
    },  
    /** 取消搜索 */  
    handleCancelSearch() {  
      this.showHeader = false;  
      this.searcHPlaceholder = "搜索位置";  
      this.isLockRollThrough = false;  
      uni.redirectTo({  
        url: "/pages/city/city-management/city-management",  
      });  
    },  
    handleClickLeft() {  
      uni.navigateTo({  
        url: "/pages/index/index",  
        animationType: "fade-in",  
        animationDuration: 300,  
      });  
    },  
    /** 更新标题 */  
    updateTitle(newTitle) {  
      this.title = newTitle;  
    },  
  },  

  onReady() {},  
  /** 监听页面滚动 */  
  onPageScroll: function (e) {  
    if (e.scrollTop > 100) {  
      this.updateTitle("城市管理");  
    } else {  
      this.updateTitle("");  
    }  
  },  
};  
</script>  

<style>  
page {  
  background-color: #fff !important;  
}  
</style>  

<style lang="scss">  
.el-hidden {  
  display: none !important;  
}  

.status_bar {  
  height: var(--status-bar-height);  
  width: 100%;  
  background-color: #fff;  
}  

// 图标样式覆盖  
.uniui-arrow-left {  
  font-size: 50rpx !important;  
}  
.header {  
  margin: 10rpx 0 40rpx 20rpx;  
  font-size: 28px;  
  font-weight: 300;  
}  
</style>  

操作步骤：

无效

预期结果：

状态栏不被穿透

实际结果：

状态栏被穿透