计划简述

在网上看过一些其他人的计划，和我构想的向胶囊看齐思路（这个不应该是最简略清晰的计划么？）都不一样，所以就本人整了一个计划了。

要实现自定义导航栏与胶囊对齐，如下图如示，只须要获取导航栏高度，及导航栏距上的地位（其实就是状态栏高度），再通过css布局就实现工作了。这个计划应该是最简略易懂的计划了。
如果有更简单的布局须要，都以导航容器为基准去扩大就行了。

获取距上和高度

距上

获取距上，也即状态栏高度，调用 wx.getSystemInfoSync api 能够拿到：

// 获取距上const barTop = wx.getSystemInfoSync().statusBarHeight
getSystemInfoSync 参考（留神：小程序根底库版本不低于 1.9.6）： https://developers.weixin.qq....

导航栏高度

从下面的图里咱们能够看到导航栏高度是由胶囊高度+胶囊上下边距。
胶囊上下边距是一样大的，通过胶囊top-状态栏高度就能够失去上边距。
胶囊信息通过 wx.getMenuButtonBoundingClientRect api 能够拿到。

// 获取胶囊按钮地位信息const menuButtonInfo = wx.getMenuButtonBoundingClientRect()// 获取导航栏高度const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2
getMenuButtonBoundingClientRect 参考 （留神: 小程序根底库版本不低于 2.15.0）：https://developers.weixin.qq....

占位容器高度

一般来说自定义导航栏是要固定在页面最下面的，所以得有个占位元素来占距地位，不然页面最下面失常内容就会被导航栏遮住。所以导航栏里面应该再加个占位容器，高度 = 导航栏高度 + 距上。

const placeholderHeight = barHeight + barTop

代码汇总

js 局部:

// 如果须要多个页面都引入自定义组件，那建一个 Behavior 放外面Page({  data: {    // bar （title这一条） 距    barTop: 0,    // bar 高度， bar 是 fixed    barHeight: 0,    // 占位高度，不是 fixed，这个高度理论就是 barTop + barHeight    placeHolderHeight: 0  },  onLaunch () {    // 获取距上    const barTop = wx.getSystemInfoSync().statusBarHeight    // 获取胶囊按钮地位信息    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()    // 获取导航栏高度    const barHeight = menuButtonInfo.height + (menuButtonInfo.top - barTop) * 2    this.setData({      barHeight,      barTop,      placeHolderHeight: barHeight + barTop    })  }})

wxml 局部。要留神的是 占位容器是失常元素顶不到屏幕最下面，所以给它加红色背景色是遮不住状态栏的，得在 header 上加，因为 header是 fixed 元素能够顶到屏幕最下面，而后top用在padding上。Perfect!

<view style="height: {{placeHolderHeight}}px;">  <view class="header" style="height: {{ barHeight }}px; padding-top: {{barTop}}px">    <text>这是题目</text>  </view></view>

wxss 局部

.header {  background-color: #fff;  position: fixed;  top: 0;  left: 0;  right: 0;}

其余

设置小程序根底版本库

getMenuButtonBoundingClientRect 须要小程序根底库版本不低于 2.15.0，登录微信小程序管理后盾，在最上面的 设置-根本设置-性能设置-根底库最低版本设置 里能够设置。

自定义导航栏配置

要自定义导航栏，须要在页面的 json 文件里减少配置：

// xxx.json{  "navigationStyle": "custom"}
https://developers.weixin.qq....