自定义顶部导航

1.在json文件中配置

  "navigationStyle": "custom",

2.在app.js中计算导航条高度 保存在全局变量中

App({
  onLaunch: function () {
    var that = this;
    // 获取设备信息
    wx.getSystemInfo({
      success(res) {
        let {
          statusBarHeight,
          platform
        } = res

        that.globalData.statusBarH = statusBarHeight      
        if (platform == "android") {
          that.globalData.topBar = 48;
        } else {
          that.globalData.topBar = 44;
        }
      }
    })
  },
  globalData: {
    statusBarH: 0,
    topBar: 0
  },
})

3.导航标题及返回箭头

__________________wxml
    <view class="{{showbg ? 'fixed wid' : 'fixed'}}" style='height:{{navH+topBarHeight}}px'>
      <view class="top" style='height:{{navH+topBarHeight}}px'>
        <view class="back-wrap flex-cc" bindtap="onClickLeft">
          <image class="back" src="/packageOrder/images/orderDesc/back.png"></image>
        </view>
        <text class="center-title" style="line-height:{{topBarHeight}}px">订单详情</text>
      </view>
    </view>
_______________js
  data: {
    navH: 0,
    topBarHeight: 0,
    showbg: false,//是否展示头部背景
  },

  onLoad: function (options) {
    this.setData({
      navH: app.globalData.statusBarH,
      topBarHeight: app.globalData.topBar

    })
  },
<!--监听滚动条-->
  onPageScroll(e) {
    if (e.scrollTop > 10) {
      this.setData({
        showbg: true
      })
    }else{
      this.setData({
        showbg: false
      })
    }
  <!--返回上一页-->
  onClickLeft() {
    wx.navigateBack({
      delta: 1
    })
  }, 
  },
_________________wxss
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
}
.wid {
  width:100%;
  background: #FFD240;
  transition: all 2s;
}
.top {
  position: relative;
  top: 0;
  left: 0;
}
.back-wrap {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 10px 15px;
}
.back {
  width: 18rpx;
  height: 34rpx;
}
.center-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  text-align: center;
}
.flex-cc {
  display: flex;
  align-items: center;
  justify-content: center;
}