微信小程序自定义顶部导航栏

1.在components(没有就在根目录下创建一下)文件夹下创建navigation-bar组件

2.在navigation-bar.js下，动态设置导航栏的高度

// components/navigation-bar/navigation-bar.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    navTitle:{
      type:String,
      value:"标题"
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    navHeight: 0, //导航栏高度
    menuTop: 0, //胶囊距顶部间距
    menuHeight: 0 //胶囊高度
  },

  lifetimes: {
    attached: function () {
      //系统信息
      const systemInfo = wx.getSystemInfoSync();
      //胶囊位置
      const capsuleInfo = wx.getMenuButtonBoundingClientRect();
      //计算导航栏高度
      let navHeight = systemInfo.statusBarHeight + capsuleInfo.height + (capsuleInfo.top - systemInfo.statusBarHeight) * 2
      let menuTop = capsuleInfo.top
      let menuHeight = capsuleInfo.height
      this.setData({
        navHeight,
        menuTop,
        menuHeight
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

3.编写导航栏样式,navigation-bar.wmxl,navigation-bar.wxss

<!--components/navigation-bar/navigation-bar.wxml-->
<view class="nav" style="height: {{navHeight}}px;line-height: {{lineHeight}}px;">
  <view class="title" style="padding-top:{{menuTop}}px;height: {{menuHeight}}px;min-height: {{menuHeight}}px;line-height: {{menuHeight}}px;">{{navTitle}} </view>
</view>

/* components/navigation-bar/navigation-bar.wxss */
.nav{
  background-color: #000000;
  width: 100%;
}

.title{
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 36rpx;
}

4.在app.json中，设置顶部导航自定义模式

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

5.在全局组件设置中设置导航栏组件，或者在需要的page页设置

{
  "usingComponents": {
    "navigation-bar":"/components/navigation-bar/navigation-bar"
  }
}