微信小程序隐藏标题栏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页面中加入样式


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

你可能感兴趣的:(微信小程序隐藏标题栏navigationBar的方法)