微信小程序隐藏标题栏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>

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容