前言：
小程序一般统一采用默认的导航栏，但是一些特殊情况和业务需求会去单独定义某个页面的导航栏
我的项目采用的wepy小程序二次封装框架，和原生小程序没太大区别，只是通过特殊编译，把小程序变成了vue风格的编写方式。
正题
config = {
navigationBarTitleText: '停车',
navigationStyle: 'custom',
usingComponents: {
'load-more': '../components/weapp/load-more/index'
}
}
1.在需要单独定义导航栏的页面配置navigationStyle为’custom‘，参照小程序文档
2.这个时候你会发现导航位置 就只有一个胶囊了：如图：
image.png
- 快乐的编写自己的导航栏，注意事项
- 胶囊在不同的机型位置不一样
- 自定义导航栏要用固定定位，z-index要高于页面其他元素
- 难点可能就是在计算导航栏高度和导航栏到顶部的高度了吧。目前方案有两个
-
伪代码：navHeight = statusBarHeight + 胶囊Height + margin-top胶囊*2
top= statusBarHeight + margin-top胶囊
image.png
根据实际经验和小程序设计规范 安卓机 margin-top为8px，ios为4px。
经过测试，基本能适配苹果x系列，安卓的滴水屏等
- 通过wx：Api wx.getMenuButtonBoundingClientRect() 获取胶囊位置信息，但是据说有一定bug，我没在生产环境中测试过
