背景在做小程序的时候，我们遇到了以下关于默认导航栏的问题：Android和IOS手机页面标题显示不一致，Android标题显示不居中。页面的标题只支持纯文本级别的样式控制，无法做出更丰富的标题效果。左上角事件无法监听，自定义路由导航单一。您只能返回到上一页。深层次页面的返回不够友好。小伙伴们都用过这个功能，很多小伙伴也会发现一些坑：机型多：自定义导航栏的高度在不同机型上永远无法实现视觉上统一的导航栏，导航栏中的内容也不尽相同垂直居中。更不用说适应所有手机的顽皮胶囊按钮：导航栏元素（文本、图标等）怎么可能错位？该死的胶囊按钮有各种尺寸的全面屏和奇怪的缺口屏幕。找到答案真是太疯狂了。为了弄明白原理，先去看了官方文档，>>Airplane，点开有惊喜吗？奇怪的是，整篇文章最下面只有一张图和这个问题相关，而且什么都看不清楚，汗汗汗……我特意找了一张图分析上面的图，得到了如下信息：Android和iOS是有区别的，体现在top和capsulebutton之间有6pt的区别。胶囊按钮的高度是32pt，而iOS跟Android的动手分析。我们来写一个状态栏，通过wx.getSystemInfoSync().statusBarHeight设置高度。是这样吗？答案是：苹果手机确实是4px，安卓手机大部分是7和8。还会有其他情况（可以打印getSystemInfo自己验证）。如何快速简单的计算出这个高度，请继续看如何计算导航栏Bar和标题栏的状态，只要能计算出各个手机导航栏的高度，问题就迎刃而解了。导航栏高度=胶囊按钮高度??+状态栏到胶囊按钮间距*2+状态栏高度注意：由于胶囊按钮是原生组件，所以性能是一致的，它的单位在各种手机中都是px，所以单位我们自定义导航栏的大小必须是px（切记不要用rpx），这样才能完美适配。解决问题既然明白了原理，我们就可以利用胶囊按钮的位置信息和statusBarHeight的高度来动态计算导航栏的高度，贴出实现这个功能最重要的方法letsystemInfo=wx.getSystemInfoSync();让rect=wx.getMenuButtonBoundingClientRect？wx.getMenuButtonBoundingClientRect():null;//胶囊按钮位置信息wx.getMenuButtonBoundingClientRect();letnavBarHeight=(function(){//导航栏高度letgap=rect.top-systemInfo.statusBarHeight;//动态计算状态栏到各手机胶囊按钮的距离return2*gap+rect.height;})();差距信息是不同手机状态栏到胶囊按钮的距离，更具体的多代码实现和demo请移步下方代码仓库，里面会有输入框文字跳转的解决方法代码，Android手机输入框文字飞出的解决方法，左键边框过粗的解决方法等Capsule信息报错和获取问题是getMenuButtonBoundingClientRect方法会报错或者在某些机器和环境中无法获取它。在这种情况下，模拟胶囊位置是完美的。尝试{rect=Taro.getMenuButtonBoundingClientRect？Taro.getMenuButtonBoundingClientRect():null;if(rect===null){throw'getMenuButtonBoundingClientRect错误';}//如果值为0if(!rect.width){throw'getMenuButtonBoundingClientRecterror';}}catch(error){letgap='';//胶囊按钮上下距离使导航内容居中letwidth=96;//capsule的宽度大多android为96，ios为88if(systemInfo.platform==='android'){gap=8;宽度=96;}elseif(systemInfo.platform==='devtools'){if(ios){gap=5.5;//开发工具中的ios手机}else{gap=7.5;//开发工具中的android和其他手机}}else{gap=4;宽度=88；}if(!systemInfo.statusBarHeight){//wifi打开时，statusBarHeight值无法修复。systemInfo.statusBarHeight=systemInfo.screenHeight-systemInfo.windowHeight-20;}rect={//如果获取不到胶囊信息，重新设置一个bottom:systemInfo.statusBarHeight+gap+32,height:32,left:systemInfo.windowWidth-width-10,right:systemInfo.windowWidth-10,top：系统信息。statusBarHeight+gap,width:宽度};console.log('错误',错误);console.log('rect',rect);}上面的代码主要是借鉴了拼多多默认值的写法，gap值在android机中大部分是8，ios是4。在开发工具中，ios是5.5，安卓是7.5。这样处理之后，你就可以自己模拟一个胶囊按钮的位置，这样在无法获取胶囊信息的情况下，可以保证大部分机器是完美的。显示导航头吐槽这么重要的问题，官方竟然没有给出解决办法……还提供了一张看不清的图？？？ios设置44个，android设置48个，根据不同手机型号设置不同高度，通过长期的开发试用，发现上述方案并不完美，代码库taro有很多bug组件gitHub地址详细使用请参考README原生组件npmbuild该版本gitHub地址的详细使用方法请参考README。原生组件gitHub地址的详细使用方法请参考原生组件gitHub地址的详细使用README。由于本人精力有限，目前只打算发布和维护这两个组件。请修改其他组件的代码。元器件在30多款手机的底部。测试性能良好。iPhone手机来电和热点导致导航栏样式错乱。问题已经解决。请去demo测试一下。在此，感谢朋友们提出的朋友圈问题。本文不作任何商业用途。性质，如有侵权，请联系本人修改或少量删除文章。一小部分内容是我收集的。有什么问题可以在下方留言讨论。是最好的，但是个人觉得有几个小问题可以优化。调用或开启热点导致样式散乱。这也是大多数小程序的问题。导航栏的底部边距太小，看起来不舒服。2个侧键组之间的距离不相等。自定义返回键和home键竖线颜色偏重，感觉太粗了。如果您已经阅读了本文，请快速修改您的代码并在实践中使用它。扫码体验我小程序：制作不易，如果对你有帮助，请移步芋头组件gitHub原生组件gitHub给个star??感谢测试资料手机型号胶囊位置信息状态barheight测试情况iPhonex8032281369488844通过iPhone8Plus5632320408248820通过iPhone756322813682488720通过iPhone6Plus56323208408408248248820329624通过HUAWEIVTR-AL006432254350329624通过HUAWEIEVA-AL00643225435032962962throughHuaweiEML-AL006832254350369629VersionthroughHuaweiVog-AL006532254350339625viaHuaWeiatu-TL1064329624通过华为SmartisanOS10564322226422226422322264222642226422264222642222642226422322264过XIAOMIMI65928265352318723通过XIAOMIMI4LTE6032254350289620通过XIAOMIMIX37432287383429635通过REDMINOTE36432254350329624通过REDMINOTE46432254350329624通过REDMINOTE35528255351279620通过REDMI5plus6732287383359628通过MEIZUM571C6532254350339625通过MEIZUM6NOTE6232254350309622通过MEIZUMX4PRO6232278374309622通过OPPOA336532254350339626通过OPPOR115832254350269618通过VIVOY556432254350329624viaHonorBln-AL20643225435329624ViaHonorBND-AL10643225435032962254-32254353539624throughHonorNem-396228265352318724.G95506432305401329624via3601801-A016432254350329624via
