uniapp顶部状态栏设置

千禧皓月

已于 2022-02-14 16:36:32 修改

阅读量8.4k

点赞数 1

分类专栏： web

于 2022-02-13 04:03:12 首次发布

本文链接：https://blog.csdn.net/qq_46018418/article/details/122904950

版权

uni-app 状态栏 css变量全屏布局

关键词由CSDN通过智能技术生成

web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

非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%;
      background-color:#007AFF ;
  }
</style>