微信小程序自定義導航欄

微信小程序需要自定義導航欄，特別是左上角的自定義設置，可以設置返回按鈕，菜單按鈕，配置如下：

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
    }
})