微信小程序自定义导航栏，实现自适应

微信小程序 自定义导航,高度处理

今天碰到一个页面需要自定义导航栏的，不需要原生导航； 第一步先取消原生导航栏，只需要在json文件里面加入"navigationStyle":"custom"即可去掉原生导航栏，

一开始直接用固定高度加定位，发现在不用设备下尺寸不对，就比如iPhone X那个刘海屏，

然后就开始找适配的方法，首先是状态栏

wx.getSystemInfo(Object object)

这个api可以获取状态栏高度

然后就是右上角胶囊按钮的高度

Object wx.getMenuButtonBoundingClientRect()

这个api可以获取胶囊按钮的高度和距离顶部的距离

所以 总高度 = 状态栏高度+(胶囊按钮高度 - 状态栏高度)*2 +胶囊按钮高度

然后 导航栏高度 = 总高度 - 状态栏高度

在iPhone X也没有问题 然后我们可以在导航里面再加一句,也可以不加

高度就是等于胶南按钮的高度，到这里就完成了一个自定义导航 在入口app.js里面获取信息

onLaunch: function () {
    //获取系统信息
    wx.getSystemInfo({
      success: res => {
        this.time = res
      }
    })
    //获取胶囊信息
    this.nav = wx.getMenuButtonBoundingClientRect()

需要用到的界面

<view>
	//状态栏
  <view class="a" style="height:{{globalData}}px"> </view>
  //导航栏
  <view class="b" style="height:{{globalDatas}}px">
    <view class="c" style="height:{{globalDatassh}}px"></view>
  </view>
</view>

样式

.a{
  background: #ff00ff;
}
.b{
  background: rgb(19, 141, 197);
  display: flex;
  align-items: center;
}
.c{
  background: rgb(194, 202, 206);
  width: 100%;
}

然后就是计算赋值，在js里面计算，然后通过绑定style实现动态修改自适应

const app = getApp()

Page({
  data: {
    globalData:app.time.statusBarHeight, //状态栏高度,
    globalDatas:app.nav.height + (app.nav.top - app.time.statusBarHeight)*2 + app.nav.top - app.time.statusBarHeight, //导航栏高度
    globalDatassh: app.nav.height //胶囊高度
  },