示例图：

wxml:

<!-- 顶部自定义导航样式 -->
<!-- 样式1、2 黑色胶囊 白色胶囊-->
<view class='nav' style="height:{{navH}}px;{{background? background:''}}" wx:if="{{styles==1 || styles==2}}">
  <!-- 页面标题 -->
  <view class='nav-title' style="height:{{navTitle}}px;">
    <view class="nav-back2" style="width:{{menuW}}px;height:{{menuH}}px;"  wx:if="{{!isTab}}">
      <text class="icons icons-zuojiantou" style="color:{{styles==1? '#000':'#fff'}};" data-type="back" catchtap="goback"></text>
      <text class="nav-shu" style="background:{{styles==1? '#2F2F2F':'#fff'}};"></text>
      <view data-type="index" catchtap="goback"><image mode="widthFix" src="img/{{styles==1? 'index1':'index2'}}.png"></image></view>
    </view>
    <text style="color:{{styles==1? '#000':'#fff'}};width:{{titleWidth}}px;" class="line1">{{title}}</text>
  </view>
</view>
<!-- 样式3、4 只有返回按钮或回到主页 黑色 白色-->
<view class='nav' style="height:{{navH}}px;{{background? background:''}}" wx:if="{{styles==3 || styles==4}}">
  <view class='nav-title' style="height:{{navTitle}}px;">
    <view class="nav-back2" style="border:0;width:{{menuW}}px;height:{{menuH}}px;" wx:if="{{!isTab}}">
      <text class="icons icons-zuojiantou icons2" style="color:{{styles==3? '#333':'#fff'}};" data-type="back" catchtap="goback" wx:if="{{getCurrentPages.length>1}}"></text>
      <image wx:else style="width:56rpx;height:56rpx;" mode="widthFix" src="img/{{styles==3? 'indexs':'index'}}.png" data-type="index" catchtap="goback"></image>
    </view>
    <text style="color:{{styles==3? '#333':'#fff'}};width:{{titleWidth}}px;" class="line1">{{title}}</text>
  </view>
</view>
<view style="height:{{navH}}px;" wx:if="{{bot}}"></view>

wxss:

@font-face {
  font-family: "icons"; /* Project id 3500499 */
  src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKcAAsAAAAABlQAAAJRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcApMXwE2AiQDCAsGAAQgBYRnBzQbnwXInpo8beAx5Q1RfAAXGAghgvr9yp733wGAQtSA+jjALuqESlgCGX2rQ8KnIlR2XQCF/YM390zOBZltBK9jFyyjEXU9SxNqazrWPo+KUF2yljHV9H9t/rvDhZRh/BIK47GGBkQYO+3zfz/5F9AHviD0a5UU1ZT4gDYfyD7osi2KcGc+9Bksr/xq9k2+RKDZCgftz7eHyuhcSVEZI5zeIK+O89ioSkeHZJlmG4V6dGUWb9WRnqXPeBN/Pv5Yi0jqCk7d0d1ZWPl9X3HHFEoUXz1droWel1CHAguATJz1pw7URRuPNbsaxmhjFnxfKcvQKQ5tE+qvcypbwSgVnkn0pUfNJnisgboBg5MeQHTn38rTfm0+Ty+e94bPJ334+vbYuen/WrmoVGeTvOr1pTZTC9ZWbaugfFwfrBMz/uLdX97pWP/Xz6D264oXB8rHDZiHxn24gh9iuAkSswmTcpuou5Puc2ib3Sglx9ftnWruOXEuNOqZ4GkwkqPQaIzK3BzqtFhDvUYbaDbPr2/RY1AXuQlTVoLQqSJp9wmFThuVuQd1+n2o1+lHs8vRtluLqdiEUQmGEB/QB1RozySx2h2aMlPcFD8hX2IaBWs51ewCC+Q55sxX4y2ioWHKIcjzMMsIBqYEA7E6kbOvbd32FitRXplgSBEoBKIH0AuQgg7JUv6+HWSUMgqD1CnFLmKqHliKAaiFvoA6HuSa2ZXhWQgNNBjJgaCHoUyGgKF9WAIFhKWbkDjzaZfUoHpre2P+a/ugmWNJ4S4qNN8rKYlVIVRWKgA=') format('woff2'),url('iconfont.woff?t=1656989362799') format('woff'),url('iconfont.ttf?t=1656989362799') format('truetype');
}
.icons {
  font-family: "icons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icons-zuojiantou:before {
  content: "\e630";
}
.flex1{
  flex:1;
}
/* 字体显示一行 */
.line1{
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
/* 自定义头部 */
.nav{
  width: 100%;
  overflow: hidden;
  position: fixed;
  top:0;left:0;
  z-index: 50;
  background-repeat: no-repeat;
  background-size:100% auto;
  transition: all 0.3s;
  background-position:top left;
}
.nav-title{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  color:#fff;
  font-size: 32rpx;
  font-weight: 500;
  padding-left:0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.nav .back{
  width: 22px;
  height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
}
.nav-back{
  width:76rpx;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  padding-left: 20rpx;
  z-index: 11;
  display: flex;
  align-items: center;
}
.nav-back .iconfont{
  font-size: 32rpx;
  color: #fff;
}
.nav-back image{
  width:56rpx;
  height:56rpx;
  border-radius: 50%;
  display: block;
}
.nav-back2{
  border-radius: 32rpx;
  position: absolute;
  left:14rpx;
  top:0;bottom:0;
  margin: auto;
  z-index:10;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  border:1px solid #EDEDED;
}
.nav-back2>.icons{
  font-size:30rpx;
  flex:1;
  display: flex;
  align-items: center;
  justify-content: center;
  height:100%;
  line-height: normal;
}
.nav-shu{
  width: 1px;
  height: 60%;
  background: #2F2F2F;
  display: block;
}
.nav-back2>view{
  flex:1;
  height:100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-back2>view>image{
  width:30rpx;
  height:32rpx;
  display: block;
  vertical-align: unset;
  margin:0;
}
.nav-title2>view>image{
  width:56rpx;
  height:56rpx;
}
.itemcenter{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.nav-back2 .icons2{
  justify-content: left;flex:unset;width:56rpx;height:56rpx;
}

js:

const systemInfo = wx.getSystemInfoSync(); // 获取系统信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();// 胶囊按钮位置信息
const getTopInfo={
  statusBarHeight:systemInfo.statusBarHeight,//状态栏高度
  navBarHeight: systemInfo.statusBarHeight + menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2, // 导航栏高度
  menuWidth: menuButtonInfo.width, // 胶囊宽度
  menuHeight: menuButtonInfo.height, // 胶囊高度
  menuRight: systemInfo.screenWidth - menuButtonInfo.right, // 胶囊距右方间距（方保持左、右间距一致）
  menuTop: menuButtonInfo.top, //胶囊距离顶部的距离
};
Component({
  properties: {
    // 是否是tab页 false不是  true是
    isTab:{
      type:Boolean,
      value:false,
    },
    // 导航栏样式 1:黑色胶囊  2:白色胶囊  3黑色 4白色
    styles:{
      type:String,
      value:"1"
    },
    // 占位块是否显示  默认显示
    bot:{
      type:Boolean,
      value:true,
    },
    // 页面标题
    title:{
      type:String,
      value:"页面标题"
    },
    // 导航栏背景色,支持所有css样式，也可以是背景图，渐变色
    background:{
      type:String,
      value:"background:#fff;"
    }
  },
  data: {
    navH: getTopInfo.navBarHeight, //导航栏高度
    navTitle: getTopInfo.navBarHeight - getTopInfo.statusBarHeight, //导航栏标题高度
    titleWidth: systemInfo.screenWidth - (getTopInfo.menuWidth + getTopInfo.menuRight * 2) * 2, //导航栏标题宽度 
    menuW: getTopInfo.menuWidth,//胶囊宽度
    menuH: getTopInfo.menuHeight,//胶囊高度
    menuRight:getTopInfo.menuRight,
    getCurrentPages:getCurrentPages(),//判断是否有上级页面
  },
  methods: {
    // 返回上一页
    goback(e) {
      // 返回上一级
      if (e.currentTarget.dataset.type == 'back') {
        wx.navigateBack({
          delta: 1,
        })
      } else { // 回首页
        wx.switchTab({
          url: '/pages/index/index',
        })
      }
    },
  }
})

json:

{
  "component": true,
  "usingComponents": {}
}