微信小程序自定义导航栏组件 header

微信小程序默认的导航栏并不能满足喜欢花里胡哨的开发者，在微信客户端 6.6.0已经开始支持针对单个页面自定义导航栏，下面介绍下如何开发（挖坑）一个自定义导航栏组件

1.gif

代码片段 https://developers.weixin.qq.com/s/Ff9WEGmY7f8O

1.配置：

.json下增加配置项

navigationStyle: "custom"

2.获取导航栏定位信息

通过小程序wx.getMenuButtonBoundingClientRect() API可以获取到右上角胶囊菜单位置信息，不过这个接口不稳定，部分机型会出现获取失败的bug
我们只需要getMenuButtonBoundingClientRect的top和height信息即可

3.使用cover-view

cover-view能覆盖原生组件视图

code1.png

4.wxss文件主要使用fixed定位

code3.png

padding-bottom: 18rpx给底部增加点padding,经过测试18rpx最合适
注意：基础库 1.9.90 起最外层 cover-view 支持 position: fixed

5.js部分

code2.png

6.如何使用

配置文件.png

首页

github: https://github.com/TankCJZ/wx-applets-components
开了个专门存放微信小程序常用组件的仓库，欢迎来填坑吐槽~