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

怎么隐藏小程序顶部导航栏(navigationBar)?

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

复制代码
"window": {
	// ... 其他配置省略
	"navigationStyle":"default"
}

page.json:

复制代码
{
  "navigationStyle":"custom",
}

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

相关推荐
计算机毕设指导61 小时前
基于微信小程序的扶贫助农系统【源码文末联系】
java·spring boot·后端·微信小程序·小程序·tomcat·maven
会员源码网3 小时前
最新壁纸头像小程序系统源码 制作头像的软件 头像壁纸软件 带流量主
小程序
2501_915106323 小时前
Perfdog 成本变高之后,Windows 上还能怎么做 iOS APP 性能测试
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 小时前
iOS 安装了证书,HTTPS 还是抓不到
android·网络协议·ios·小程序·https·uni-app·iphone
万岳软件开发小城4 小时前
医院APP/小程序开发实战:基于互联网医院系统源码的完整落地流程
小程序·互联网医院系统源码·医院小程序开发·医院app开发·医院软件开发
小光学长4 小时前
基于微信小程序的评奖评优系统51r12nd0(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·微信小程序·小程序
Jenna的海糖4 小时前
检查微信小程序版本更新,手动更新
微信小程序·小程序
2501_916007475 小时前
iOS 自动化上架的工具组合,在多平台环境中实现稳定发布
android·运维·ios·小程序·uni-app·自动化·iphone
1024小神6 小时前
uniapp项目中使用vue3和小程序组件父子通信
前端·小程序·uni-app
爱敲代码的婷婷婷.6 小时前
微信小程序配置h5域名 / 普通二维码规则
微信小程序·小程序