uni-app移动端状态栏问题

刘小江
2021-04-20 / 0 评论 / 77 阅读 / 正在检测是否收录...

uni-app官网提供的方法:

//非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。
    <template>
      <view>
          <view class="status_bar">
              <!-- 这里是状态栏 -->
          </view>
          <view> 状态栏下的文字 </view>
      </view>
    </template>    
    <style>
      .status_bar {
          height: var(--status-bar-height);
          width: 100%;
      }
    </style>
    //如果原生导航栏不能满足需求,推荐使用uni ui的自定义导航栏。这个前端导航栏自动处理了状态栏高度占位问题。

官网:https://uniapp.dcloud.io/collocation/pages?id=customnav

0

评论 (0)

取消