微信小程序 自定义导航栏

1. 在app.json的window对象中定义导航的样式
   

"window":{
  "navigationStyle": "custom"
},

2. 在app.js的onLaunch方法里面获取手机状态栏高度，全局定义导航高度navH

 // 获取手机系统信息
    wx.getSystemInfo({
      success: res => {
        console.log(res)
        //导航高度
        this.globalData.navH = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })

全局定义导航高度

  globalData: {
    userInfo: null,
    navH: 0
  }

3. 在需要导航的 页面Page拿到全局变量导航高度

const app = getApp();

this.setData({
	navH: app.globalData.navH
})

4. wxml

<view class='nav' style="height:{{navH}}px;background-color: {{bgColor == '' ? '#3598DB' : bgColor }};">
  <view class='nav-title' style="color: {{color == '' ? '#fff' : color }};">
    {{title}}
    <view class="nav-box" wx:if="{{flag == 0}}"></view>
    <view class="nav-box" wx:if="{{flag == 1}}">
      <image src="./Path-1.png" mode='aspectFit' class='back' bindtap='navBack'></image>
    </view>
  </view>
</view>
<view style="margin-top: {{navH}}px"></view>

5. wxss

.nav{
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  position: fixed;
  left: 0;
  top: 0;
}
.nav-title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-size:36rpx;
  letter-spacing:2px;
  
font-weight: bold;
} 
.nav-box {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.nav .back{
  width: 20rpx;
  height: 35rpx;
  padding-left: 30rpx;
}

6. 使用组件方法的话，
   js部分

// components/navigation/navigation.js
const app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: String,
    flag: Number,
    color: String,
    bgColor: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    navH: app.globalData.navH
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    navBack: function() {
      wx.navigateBack({
        delta: 0,
      })
    }
  }
})

引用方法

<my-navigation title="首页" flag="0"></my-navigation>
![左箭头图片](https://img-blog.csdnimg.cn/20210511142319254.png)