微信小程序自定义导航教程（兼容各种手机）-创新互联

前言

本文主要给大家介绍了关于微信小程序自定义导航的相关内容，详细代码请见github，请点击地址 （本地下载），其中有原生小程序的实现，也有wepy版本的实现

了解小程序默认导航

如上图所示，微信导航分为两部分，第一个部分为statusBarHeight，刘海屏手机（iPhone X，小米8等）会比其他的手机高很多，第二部分为titleBarHeight，安卓和IOS的高度不同，但是IOS高度是一样的，IOS高度是一样的,

所以我们要实现一个兼容不同手机的导航必须要根据不同的手机实现statusBarHeight和titleBarHeight

第一步：全局设置

把app.json中的window中的navigationStyle设置为custom，官方文档链接

设置完之后发现导航栏变成了如下图所示，只剩下了右上角胶囊按钮

第二步：确定导航栏两部分的高度

（1）确定第一部分statusBarHeight的高度，这部分是手机用来展示时间，信号和手机电量的，我们可以从wx.getSystemInfo从获得

wx.getSystemInfo({
 success: function(res) {
 console.log(res.statusBarHeight)
 }
})