微信小程序之实现页面顶部导航栏透明、隐藏效果（navigationBar）欢迎点赞收藏

我们在开发微信小程序的过程中大家都知道，导航栏的颜色可以在 app.json 中的 window 属性里面添加 navigationBarBackgroundColor 属性，但是里面的颜色只能为纯色，不能使用 rgb 颜色，或者 rgba 的色号。

需求分析

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

我们可以看一下官网是否有此类方法：Navigation

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

那么，我们就知道这种效果是可以实现的，其实代码实现也超级简单，下面请看代码配置：

代码实现

一、全局顶部导航栏隐藏

在 app.json 里面的 window 增加 navigationStyle:custom 即可，部导航栏就会消失，只保留右上角胶囊状的按钮。

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

我们实现了顶部导航栏隐藏，就可以根据我们自己的需求进行顶部导航栏的定制业务，使我们的小程序看上去更加美观。

二、部分页面顶部导航栏隐藏

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

app.json：

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

page.json：

{
  "navigationStyle":"custom",
}

如果想要某一个页面实现导航栏隐藏，只需要在这个页面设置 "navigationStyle":"custom" 就可以了。

---

总结

大家看一下，是不是超级简单，我们不清楚如何实现的原因就是因为我们对其相关的 API 不太熟悉，只要找对方法，还是很容易的。

希望上面的内容对你的工作学习有所帮助，欢迎一键三连哦、

各位 加油！