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

状态栏高度 40rpx=20px

导航栏高度 88rpx=44px

1.xxx.json　　"navigationStyle"设为"custom"

{
  "usingComponents": {},
  "navigationBarTitleText": "",
  "navigationStyle": "custom"
}

2.xxx.js　　onload里面调用 wx.getSystemInfo 获取系统信息

onLoad: function(options) {
    wx.getSystemInfo({
      success: (res) => {
        // statusBarHeight 状态栏的高度，单位px
        this.setData({
          nav_height: (res.statusBarHeight + 44)+ 'px',
          nav_top: (res.statusBarHeight)+ 'px',
        })
      }

    })
  }

3.xxx.wxml

<view class="" style="height:{{nav_height}};padding-top:{{nav_top}};">
  <view class="">
    <view class="">编辑</view>
    购物车
  </view>
</view>

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

推荐阅读