今天碰到一个页面需要自定义导航栏的，不需要原生导航；
第一步先取消原生导航栏，只需要在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 //胶囊高度},
以上就是自定义导航的全部内容
小白一个，写错多多包涵
