自定义顶部导航

wxml

<view class="back_header clearfix" style="padding-top:{{top}}px;padding-bottom:{{marginBottom}}px">
<image bindtap="go_back" src="../../images/back.png"></image>
	<text style="height:{{height}}px">自定义顶部导航</text>
</view>
<view  class="menu" style="width:100%;height:10rpx;top:{{top1}}px;">
</view>

wxss

.back_header {
  width: 100%;
  height: 32px;
  background: #ccc;
  z-index: 21;
  position: fixed;
  left: 0;
  top: 0;
  padding-bottom: 9px;
}

.back_header text {
  color: #000;
  width: 650rpx;
  float: left;
  text-align: center;
  height: 32px;
  line-height: 32px;
  font-size: 18px;
  font-weight: 400;
}

.back_header image {
  float: left;
  width: 9px;
  height: 14px;
  padding:18rpx 25rpx 34rpx 23rpx;
  }
  
.menu {
  width: 100%;
  background: #f1f1f1;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 67px;
  left: 0;
  z-index: 20;
}

js

  data: {
    top: '',
    height: '',
    top1: '',
  },
  btnClick1: function () {
    // 现胶囊上边距 = 胶囊上边界坐标 - 状态栏高度
    // 现胶囊右边距 = 屏幕宽度 - 胶囊右边界坐标
    // 现胶囊下边距 = 胶囊下边界坐标 - 胶囊高度 - 状态栏高度
    // 导航栏高度 = 胶囊下边界坐标 + 现胶囊下边距
    //右上角胶囊按钮
    var that = this;
    // top：按钮上边界到屏幕上边的距离。
    // right：按钮右边界到屏幕左边的距离。
    // bottom：按钮下边界到屏幕上边的距离。
    // left：按钮左边界到屏幕左边的距离。
    var data = wx.getMenuButtonBoundingClientRect()
    var bottom=data.bottom
    var aa = wx.getSystemInfoSync().statusBarHeight;//状态栏高度
    var marginBottom=bottom-aa-data.height
    var top1 = bottom+marginBottom
    that.setData({
      top: data.top,
      height: data.height,
      top1: top1,
      marginBottom:marginBottom
    })
  },
  onLoad: function (options) {
    let that=this
    that.btnClick1();
  },
    go_back: function () {
    var that = this;
    wx.switchTab({
      url: '/customer/customer',
    })
    // wx.navigateBack({
    //   detail: 1
    // })
  },