小程序如何使用自定义导航栏

        根据项目的需求，我们不再需要小程序提供导航栏，需要自定义第一个。经过查阅资料，终于搞明白了，完美兼容iPhone X系列。

下面我们下在模拟器里的运行效果：

iphone 7

iphone X

小程序官方只是提供了，如何自定义导航栏，却没有告诉我们，如何完美的兼容不同的机型....泪奔

一、设置自定义导航栏

    首先在app.json里修改window对象，添加："navigationStyle": "custom"

windows

在运行项目 你会发现导航栏不见了，右上角的胶囊 覆盖了内容，返回按钮也不见了！！！！！

导航栏消失了

现在明白了，添加上"navigationStyle": "custom"，导航栏消失了，只能自定义返回按钮，还要写一个组件，听着就头疼，放心，我教你........

首先你不能被右上角胶囊覆盖页面呀，况且在iPhone X上展示的还不一样，如下图：

iphonex

怎么办呢！其实小程序提供给我们的导航栏 是两块的，一块是用来展示状态信息栏（状态栏），另一块就是展示title和返回按钮的标题栏，细心的同学会发现在iPhone 8 和iPhone X唯一的不同就是状态栏的高度不同而已。既然我们知道问题的所在，那我们来解决吧！

微信小程序，提供了一个获取设备信息的方法：wx.getSystemInfo()。这个方法可以获取到设备的基本信息，包括我们要的状态栏的高度。

我们在index.js的onload方法里添加如下方法：

获取设备信息

在模拟器里选择iPhone X和iPhone 7 看一下打印结果：

44px

20px

下面写一个完成的方法 来保存这个变化状态栏高度：

获取设备信息

记得在onload里调用this.onGetSystemInfo()方法，在index.wxml里添加:style='padding-top:{{navBarHeight}}px'

0003

到现在，首页完全兼容了，但是子页面还没有导航栏，也没有返回按钮呀，我们来写一个导航栏的组件吧！

在miniponents文件下新建components文件用来存放组件，在components下新建components组件名称：Navigation,如下图：

0004

代码我就不贴了，在我的项目里有，按照目录就能找到，我介绍小如何使用吧！

1、比如你在test2页面里用到了该组件，现在text2.json中添加：

"usingComponents": {

    "navigation": "../../components/Navigation/Navigation"

  }

2、test2.wxml里添加：

3、test2.js里data里添加 showIcon：true

运行页面即可看到效果：

首页

子页面

基本的介绍就到这里吧！

下图是我用小程序云开发的个人项目—我与三人行：：

项目地址：GitHub：小程序云开发-我与三人行如果您觉得还可以的话，那就statr下吧！！！！！