uniapp 關於自定義導航欄中的劉海屏適配問題

當navigationStyle設為custom或titleNView設為false時，原生導航欄不顯示，此時要注意幾個問題：

官方提供了一個CSS變量可以直接引用：

var(--status-bar-height)

該變量自動匹配設備平台狀態欄高度

此變量可以用calc() 加上其他單位數值來使用

具體參數和說明：官方使用 [ 自定義導航欄注意事項 ]

點擊查看代碼

<template>
  <view>
      <view class="status_bar">
          <!-- 這里是狀態欄 -->
      </view>
      <view> 狀態欄下的文字 </view>
  </view>
</template>    
<style>
  .status_bar {
      height: var(--status-bar-height);
      width: 100%;
  }
</style>

uni-app 提供內置 CSS 變量