小程序自定义导航栏

前言：

小程序一般统一采用默认的导航栏，但是一些特殊情况和业务需求会去单独定义某个页面的导航栏
我的项目采用的wepy小程序二次封装框架，和原生小程序没太大区别，只是通过特殊编译，把小程序变成了vue风格的编写方式。

正题

    config = {
      navigationBarTitleText: '停车',
      navigationStyle: 'custom',
      usingComponents: {
        'load-more': '../components/weapp/load-more/index'
      }
    }  

1.在需要单独定义导航栏的页面配置navigationStyle为’custom‘，参照小程序文档
2.这个时候你会发现导航位置 就只有一个胶囊了：如图：

image.png

3. 快乐的编写自己的导航栏，注意事项

• 胶囊在不同的机型位置不一样
• 自定义导航栏要用固定定位，z-index要高于页面其他元素

4. 难点可能就是在计算导航栏高度和导航栏到顶部的高度了吧。目前方案有两个

• 伪代码：navHeight = statusBarHeight + 胶囊Height + margin-top胶囊*2
  top= statusBarHeight + margin-top胶囊

  
  
  image.png

根据实际经验和小程序设计规范 安卓机 margin-top为8px，ios为4px。
经过测试，基本能适配苹果x系列，安卓的滴水屏等

• 通过wx：Api wx.getMenuButtonBoundingClientRect() 获取胶囊位置信息，但是据说有一定bug，我没在生产环境中测试过