自定义头部

小明的学习圈子

自定义头部

pages.json 中设置去掉原生头部

navigationStyle设为customtitleNView设为false时,原生导航栏不显示。

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        // 单个页面设置
        "navigationStyle": "custom"
        /* "app-plus": {
        	"titleNView": false
        } */
      }
    },
    {
      "path": "pages/index/list-news",
      "style": {
        "navigationBarTitleText": "新闻"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8",
    // 全局设置
    "navigationStyle": "custom"
    /* "app-plus":{
    	"titleNView":false
    } */
  }
}

状态栏 占位div

非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。

使用css方式进行控制

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

使用js方式进行控制

<template>
  <view>
    <view :style="'height:'+statusHeight+'px'">
      <!-- 这里是状态栏 -->
    </view>
    <text> 状态栏下的文字 </text>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        statusHeight: 0
      }
    },
    onLoad() {
      this.statusHeight = plus.navigator.getStatusbarHeight();
    }
  }
</script>
Last Updated 2023/11/20 22:02:33