微信小程序怎么隐藏顶部导航栏（navigationBar）变透明的解决方案

南通SEO2023-09-12 22:36

怎么隐藏小程序顶部导航栏（navigationBar）？

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

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

代码实现

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

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

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

app.json：

复制代码

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

page.json：

复制代码

{
  "navigationStyle":"custom",
}

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