微信小程序技巧-02-导航条的使用

一、自定义导航条

1、第三方：小程序自定义头部导航栏组件
2、小程序实现自定义导航栏适配完美版 Github

注意：导航栏 = 状态栏 + 标题栏

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2
Android导航栏高度 = 32px + 8px * 2 = 48px
iOS导航栏高度 = 32px + 6px * 2 = 44px

*注：由于胶囊按钮是原生组件，为表现一直，其单位在个系统都为px，所以我们的自定义导航栏各个高度的单位都必需是px（切记不能用rpx），才能完美适配。

重点：
1，写自定义导航组件的时候，需要将组件结构一分为二：状态栏 + 标题栏
2，状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取
3，标题栏高度：安卓：48px，iOS：44px
4，单位必需跟胶囊按钮一致，用px