微信小程序顶部导航栏-微信小程序tab导航

众所周知在开发微信小程序的过程中，导航栏的颜色可以通过navigationBarBackgroundColor属性添加到app.json中的window属性中，但是里面的颜色只能是纯色，rgb色或者rgba不能使用色号。

需求分析

但是有时候我们想要实现这种效果微信小程序顶部导航栏，想要透明隐藏顶部导航栏。 这时候就需要我们动动小脑筋想一想如何实现了。

我们可以看看官网有没有这样的方法：Navigation

官网说：Navigation是小程序最顶部的导航组件。 当页面配置navigationStyle设置为custom时，可以使用该组件替换原生导航栏。

然后，我们知道这个效果是可以实现的。 其实代码实现也超级简单。 请看下面的代码配置：

代码实现 1.全局顶部导航栏隐藏

只需要在app.json中给window加上navigationStyle:custom微信小程序顶部导航栏，导航栏就会消失，只剩下右上角那个胶囊状的按钮。

"window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "教育联盟",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
},

我们已经实现了顶部导航栏是隐藏的，我们可以根据自己的需要自定义顶部导航栏，让我们的小程序看起来更加美观。

2、部分页面顶部导航栏被隐藏

通过配置部分页面的json文件覆盖全局app.json中的导航栏配置。

应用程序.json：

"window": {
	// ... 其他配置省略
	"navigationStyle":"default"
}

页面.json：

{
  "navigationStyle":"custom",
}

如果想隐藏某个页面的导航栏，只需要在该页面设置"navigationStyle":"custom"即可。

总结

来看看是不是超级简单？ 之所以不知道如何实现，是因为不熟悉它的相关API。 只要找到合适的方法，还是很容易的。

希望以上内容对您的工作和学习有所帮助，欢迎点击三个链接，

大家加油！