微信小程序自定义导航栏

微信小程序需要自定义导航栏，特别是左上角的自定义设置，可以设置返回按钮，菜单按钮，配置如下：

1、在app.json的window属性中增加：

navigationStyle:custom  

顶部导航栏就会消失，只保留右上角胶囊状的按钮。

 

2、为了兼容适配所有机型，包括刘海屏，需要动态获取高度，并在app.js中设置：

App({
    globalData: {
      statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
    }
})

3、在wxml页面自定义导航内容

<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
  <text>demo</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

4、在app.css中设置统一样式：

.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background: #f2f2f2;
  z-index: 999;
}
.custom text{
  color: #fff;
  font-size: 34rpx;
  font-weight: 500;
  max-width: 280rpx;
}
.empty_custom{
  height: 45px;
  width: 100%;
}

5、在js文件中设置高度

Page({
    data:{
        statusBarHeight: app.globalData.statusBarHeight
    }
})