微信小程序自定义顶部导航栏,添加背景图,透明色等.

在微信小程序中，自定义导航栏的颜色 可以在app.json.  window里面添加navigationBarBackgroundColor属性。

但是颜色只能为十六进制颜色码，不能使用rgb，或者rgba.。

为了满足更多用户的需求，微信官方给出了一个navigationStyle属性。

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom  模式可自定义导航栏，只保留右上角胶囊状的按钮)。

在app.json window 增加 navigationStyle:custom ，顶部导航栏就会消失，保留右上角胶囊状的按钮，如下图所示。

 

Q：如果改变胶囊体颜色？

A：胶囊体目前只支持黑色和白色两种颜色 在app.josn window 加上 "navigationBarTextStyle":"white/black"

注：如果自定义导航栏，页面自带的返回按钮也会消失，需要用代码编写