小程序动态设置导航栏和状态栏

设置导航栏为自定义

• "navigationStyle": "custom"
  

{

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom"
  },

}

• index.js

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    statusHeight: 0,
    menuTop: 0,
    menuHeight: 0
  },
  onLoad() {
    // 获取状态栏的高度
   wx.getSystemInfo({
      success: (result) => {
        console.log(result)
        this.setData({
          statusHeight: result.statusBarHeight
        })
      },
    })
    // 获取胶囊的高度和top值
    let menu = wx.getMenuButtonBoundingClientRect()
    let menuTop = menu.top - this.data.statusHeight;
    this.setData({
      menuTop: menuTop,
      menuHeight: menu.height
    })
  },

})

• index.wxml

<view class="status-bar1" style="{height: {{statusBarHeight + 'px'}}'}">
 {{statusHeight}}
</view>
<view class="menu" style="height: {{menuHeight + 'px'}};margin-top: {{menuTop +'px'}}">
 首页
</view>

• index.wxss

.status-bar1 {
  background-color: #ff6600;
}
.menu {
  background-color: #00f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

uniapp中使用全局的getApp获取状态栏和导航栏和胶囊的高度

<script>
export default {
  globalData: {
    statusBarHeight: 0, //状态栏高度
    menuTop: 0, //导航栏高度
    menuHeight: 0,
    navHeight: 0,
  },
  methods: {
    initNav() {
      var self = this.globalData;
      this.$nextTick(()=>{
        wx.getSystemInfo({
        	success: res => {
        	   // 状态栏的高度
        		self.statusBarHeight = res.statusBarHeight;
        	}
        });
        const menu = wx.getMenuButtonBoundingClientRect();
        // 胶囊的高度
        self.menuHeight = menu.height;
        // 胶囊距离状态栏的top值
        self.menuTop = menu.top - self.statusBarHeight;
        // 整个导航栏的高度
        self.navHeight = self.menuTop*2 + self.menuHeight
      })
    }
  },
	onLaunch: function() {
		console.log('App Launch');
		//获取胶囊信息
		// 静默登录
    this.initNav()
	},
  
	onShow: function() {
		console.log('App Show');
	},
	onHide: function() {
		console.log('App Hide');
	},


};
</script>

使用

<template>
  <view>
    <!-- 占位符-状态栏 -->
    <view class="ic-status-height" :style="'height: '+app.statusBarHeight+'px;'"></view>
        <!-- 导航栏-->
    <view class="ic-nav"
      :style="{height:app.menuHeight+'px', marginTop:app.menuTop + 'px',marginBottom: app.menuTop + 'px'}">
      <!-- 或者直接设置 导航栏的高度 navHeight -->
      <view class="ic-nav-left">
        <image src="../../static/account/IMicon.png" mode="widthFix"></image>
        <text>{{name}}</text>
      </view>
      <view class="ic-nav-center">
        <text>{{title}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "index-custom-nav",
    props: {
      name: {
        type: String,
        default: "杭州"
      },
      title: {
        type: String,
        default: "ME杭州"
      },
    },
    data() {
      return {
        app: getApp().globalData
      };
    },
    mounted() {
      console.log("this", this.app)
    }
  }
</script>

<style lang="scss" scoped>
  .ic-status-height {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .ic-nav {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    color: #ffffff;
    font-weight: 500;
    position: relative;

    .ic-nav-left {
      position: absolute;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 28rpx;
      display: flex;
      align-items: center;

      image {
        width: 34rpx;
        height: 52rpx;
        margin-right: 12rpx;
      }
    }

    .ic-nav-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 36rpx;
    }
  }
</style>