封装uniapp 自定义头部导航栏 通用小程序和H5

因为最近做的项目是通用H5和小程序的 所以就不能用原生的头部导航 就需要自己封装一个

1.首先在pages.json中 在每个页面路由下加上 "navigationStyle": "custom" 这样去掉原生导航

2.定义一个通用的组件 headerBar.vue文件

就可以做到一个这样的效果 会根据胶囊的高度 来自适应