小程序封装自定义头部，带插槽，兼容所有机型

当初写这个也是写了很久，查了不少的博客，才完成这个兼容性比较强的版本
在这里记录也是方便以后用的时候方便，有不足的地方请大家多多指教

**

1.首先在app.js中获取状态栏的信息

**

//小程序该菜单按钮的布局位置信息
 let capsuleObj = wx.getMenuButtonBoundingClientRect();
    wx.getSystemInfo({
      success: (res) => {
      //顶部状态栏高度并定义全局变量
        var statusBarHeight = res.statusBarHeight; 
        this.globalData.capsuleObj = capsuleObj;
        //获取title高度并定义全局变量
        this.globalData.titleHeight = statusBarHeight + capsuleObj.height + (capsuleObj.top - statusBarHeight) * 2;
      },
      failure() { }
    })

2.封装title组件

（1）js文件

 const app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    navbarData: { //   由父页面传递的数据，变量名字自命名
      type: Object,
      value: {
      },
      observer: function (newVal, oldVal) {}
    },
    // 是否使用插槽，默认不启用,值为true启用
    slotType:{
       type:Boolean,
       value:false
    },
    // 背景颜色
    bgColor: {
      type: String,
      value: ''
    },
    // 字体颜色
    Color: {
      type: String,
      value: ''
    }


  },

  /**
   * 组件的初始数据
   */
  data: {

  },
//  进入页面获取全局变量
  attached: function () {
    this.setData({
      titleHeight: app.globalData.titleHeight,
      capsuleObj: app.globalData.capsuleObj
    })
  },

  options: {
    multipleSlots: true, //开启多slot
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**返回 */
    backClick: function () {
      if (this.data.navbarData.taBar) {
        wx.switchTab({
          url: this.data.navbarData.url,
        })
      } else {
        var pages = getCurrentPages();
        if (pages != null && pages.length > 0) {
          var currentpage = pages[pages.length - 1];
          var ModifyData = currentpage.data.ModifyData || false;
          if (pages.length > 1) {
            var pagetop = pages[pages.length - 2];
            pagetop.setData({
              RefreshData: ModifyData
            })
          }
        }
        wx.navigateBack({
          delta: 1,
          fail() {}
        })
      }
    },
    // 返回主页
    homeClick: function () {
      wx.switchTab({
        url: "/pages/tabar/index",
      })
    }
  }
})

（2）html文件

<view class="customHeader_box" style="height:{{titleHeight}}px; background-color:{{bgColor}};">
    <!-- 自定义插槽 -->
    <view wx:if="{{slotType}}" class="slotClass" style="height:{{capsuleObj.height}}px;line-height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
        <slot></slot>
    </view>
    <block wx:else>
        <!-- 返回+首页 -->
        <view wx:if="{{navbarData.showCapsule}}" class="backHome_box" style="width:{{capsuleObj.width}}px; height:{{capsuleObj.height}}px; top:{{capsuleObj.top}}px;">
            <view class="customIcon homeIcon" bindtap="homeClick" wx:if="{{navbarData.returnType}}">
                <text class="iconfont iconlianjie" style="color:{{Color}}"></text>
            </view>
            <view class="customIcon backIcon" bindtap="backClick" wx:if="{{navbarData.homeType}}">
                <text class="iconfont iconfuli" style="color:{{Color}}"></text>
            </view>
        </view>
        <!-- 标题 -->
        <view class="customHeader_title" style="top:{{capsuleObj.top}}px; color:{{Color}}; height:{{capsuleObj.height}}px; line-height:{{capsuleObj.height}}px;">
            {{navbarData.title}}
        </view>
    </block>
</view>

<!-- 自定义顶部距离修正 -->
<view class="customWrap" style="height:{{titleHeight}}px;"></view>

（3）css 文件

.customHeader_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

.customIcon {
  flex: 1;
  text-align: left;
  padding-left: 30rpx;
}


/* 菜单 */
.menu_box {
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  left: 10px;
  z-index: 11;
  display: flex;
  justify-content: space-between;
  align-items: center;
}



/* 返回+首页 */

.backHome_box {
  text-align: center;
  /* border: 1px solid #e5e5e5; */
  border-radius: 20px;
  box-sizing: border-box;
  overflow: hidden;
  position: absolute;
  /* left: 10px; */
  z-index: 11;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .backIcon {
  border-right: 1rpx solid #e5e5e5;
 } */

/* 标题 */

.customHeader_title {
  width: 100%;
  padding-left: 115px;
  padding-right: 115px;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  text-overflow: ellipsis;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  left: 0;
  z-index: 10;
}
.slotClass{
 position: absolute;
  left: 0;
  right: 115px;
  z-index: 10;

}
/* 自定义顶部距离修正 */
.customWrap {
  width: 100%;
  position: relative;
  left: 0;
  z-index: 99998;
}

.icon-shouye1 {
  font-size: 44rpx;
}

3.使用

json文件直接引入自己封装的路径
<nav-bar navbarData="{{navbarData}}" bgColor="#333" Color="#fff" >
颜色改成自己想要的颜色，或者不传就是json默认的颜色
 navbarData:{
            showCapsule:1,//是否显示左上角图标
            returnType:1,//是否显示返回图标 不传不显示
            homeType:1,//是否显示主页图标 不传不显示
            title:'登录'//中间标题
        }
    slotType="true" 可以开启插槽自定义内容

结尾：
基本上拿过去就能用，就是返回那里需要自己处理一下,
这也是借鉴了其他大神的博客，如有冒犯请与我联系，谢谢。