微信小程序（十八）- 自适应导航栏高度

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

本次系列文章参与八月的更文活动，记录一个微信小程序从零到有的开发过程。本文为本系列第十八篇：自适应导航栏高度

在开发过程中，会遇到这么一个问题，就是在一些内部页面，不需要用到微信官方提供的标题，需要自定义整个头部样式，这种情况，我们就需要考虑如何自定义标题和如何考虑自适应各个手机的导航栏。

自定义标题

关于自定义标题，首先我们可以自定义标题名称，在页面的json文件中，添加"navigationBarTitleText": "编辑信息"即可。

那么如果想要完成自定义标题呢？也一样，在页面的json文件中，添加"navigationStyle": "custom"即可。那么我们就拥有一个没有标题的页面啦~接下来就要来自己开发我们自己的样式啦。

自适应导航高度

但是如下我们可以看到，不同手机的导航栏高度并不相同。

那么怎么才能让我们自己写的样式完美的自适应所有手机呢？其实官方是给我们提供了以下这么几个信息的。 首先我们通过获取 wx.getSystemInfoSync系统信息获取到：导航栏高度,胶囊距右方间距,胶囊距底部间距和胶囊高度 在app.js中全局获取这些信息，如下代码

// app.js
const api = require('./utils/api.js');
App({
  onLaunch() {
    //自定义顶部导航栏
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏高度 + 44
    that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
    that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
    that.globalData.menuTop=  menuButtonInfo.top;
    that.globalData.menuHeight = menuButtonInfo.height;
  },
  globalData: {
    navBarHeight: 0, // 导航栏高度
    menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
    menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
    menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
  }
})

那么，在需要使用到这些信息的页面，只需要引入该变量即可,并在页面样式中使用即可。

js

const app = getApp()
Page({
    data: {
      navBarHeight: app.globalData.navBarHeight
      }
  })

wxml

<view class="header"  style="margin-top:{{navBarHeight}}px">
xxx
</view>