微信小程序隐藏标题栏navigationBar的方法

想要达到以下效果：

image.png
一开始是这样的，想要将轮播区域移至到胶囊按钮处
image.png
步骤1：
app.json中"navigationStyle": "default"改成"custom"

"window": {
    .....
    "navigationStyle": "custom"
  },

步骤2：获取胶囊按钮距离顶部的距离
util/system.js

//获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
export const custom = wx.getMenuButtonBoundingClientRect();

步骤3：在对应的页面的onLoad函数获取胶囊按钮距离顶部的距离

onLoad: function (options) {
    this.setData({
      custom: system.custom
    })
  },

步骤4：在对应的wxml页面中加入样式

<view class="banner-box" style="{{custom?'padding-top:'+custom.top+'px':''}}" >
......
</view>

就可以将其挪到上面啦~~~