微信小程序默认的导航栏并不能满足喜欢花里胡哨的开发者，在微信客户端 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
<header hasBack="{{true}}">首页</header>
github: https://github.com/TankCJZ/wx-applets-components
开了个专门存放微信小程序常用组件的仓库，欢迎来填坑吐槽~
网友评论