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

app.json

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

app.json 中添加 所有页面的导航栏都会被自定义，如果只需要在指定页面自定义导航栏，那么只需要在对应page的json文件中添加 "navigationStyle": "custom" 即可

在需要自定义的页面

index.wxml

<view style="height:{{barheight}}rpx;width:750rpx;background-color:#ffffff;"></view>

index.js

//此方法用于获取顶部胶囊的信息

let menubutton = wx.getMenuButtonBoundingClientRect()
    //获取胶囊的高度和顶部距离，设置为自定义导航的高度即可
    app.globalData.barheight = (menubutton.height+menubutton.top+8)*2
    this.setData({
      barheight:(menubutton.height+menubutton.top+8)*2
    })