移动端 刘海平上面顶部遮挡 解决

• --status-bar-height 是 uni-app 跨端注入的系统变量

• 自动适配：

  • 刘海屏

  • 全面屏

  • iOS / Android

  • 不同状态栏高度

  • ①pages.json里面配置

  • "pages": [

    {

    "path": "index/index",

    "style": {

    "navigationBarTitleText": "媒体库",//顶部居中的标题

    "navigationStyle": "custom",//不要顶部的标签名字

    "navigationBarBackgroundColor": "#1E2229"//顶部背景色

    }

    },

  不遮挡了在page样式里面加上 padding-top: var(--status-bar-height);

    .page {
      padding-top: var(--status-bar-height);
      box-sizing: border-box;
      background-color: #101319;
      height: 100vh;
      display: flex;
      flex-direction: column;