最近在开发小程序项目的时候，经常碰到需要自定义导航栏的需求，正常来说，微信小程序的导航栏都是固定的，即不需要我们再去手动添加和修改，但是有的用户会嫌官方的导航栏不是很美观，想要自定义，今天厦门在乎科技为大家带来微信小程序导航栏开发详解，一起来了解一下吧。
微信小程序导航栏怎么做?
一、实现的前提
首先查看文档，看文档里关于自定义导航栏是怎么规定的，有哪些限制;还有小程序自定义导航栏全局配置和单页面配置的微信版本和调试库的最低支持版本。
在 app.json window 增加 "navigationStyle":"custom"，顶部导航栏就会消失，只保留右上角胶囊状的按钮，如何修改胶囊的颜色呢;胶囊体目前只支持黑色和白色两种颜色 在 app.josn window 加上"navigationBarTextStyle":"white/black"。
还要考虑加返回按钮和返回首页的按钮，适配不同的机型。
先说下两种配置方法：
1、全局配置navigationStyle
调试基础库>=1.9.0
微信客户端>=6.6.0
app.json：
2、单页面配置navigationStyle
· 调试基础库>=2.4.3
· 微信客户端版本>=7.0.0
自定义的页面.json：
两者的区别就是，全局配置放在app.json文件里，单页面配置放在自定义页面配置文件里。
二、实现的步骤
以下说下几个要点：
1、自定义导航栏文本，是否显示返回，是否显示返回首页，导航栏高度。
2、 statusBarHeight，用来获取手机状态栏的高度，这个需要在全局app.js中的 onLaunch，调用 wx.getSystemInfo 获取， navigationBarHeight + 默认的高度，这个是设定整个导航栏的高度。
3、还有注意的，在写样式距离和大小时建议都用px，因小程序右边的胶囊也是用的px，不是rpx。
4、因为自定义导航栏每个页面都要写，所以把导航栏封装了公共组件，这样只需要在每个页面引入即可。
这里有个需注意的问题，就是一般会出现自定义导航栏，下拉页面，导航栏也随着会下拉，这种问题是因为设置 fixed 后页面元素整体上移了 navigationBarHeight，所以在此组件里设置一个空白view元素占用最上面的 navigationBarHeight 这块高度。
以上就是今天为大家带来的关于“微信小程序导航栏怎么做 小程序自定义导航栏组件”全部内容，自定义导航栏既可以实现产品的需求还可以满足UI的设计美感，在顶部空白处加上返回首页的按钮，这样和返回按钮还对称，效果还是不错的，想要了解更多关于小程序导航栏设计的内容，欢迎关注厦门在乎科技-专注小程序、app、网站开发
