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

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

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

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

page.json:

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

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

相关推荐
2501_9151063217 小时前
iOS 抓不到包怎么办?从 HTTPS 代理排查到 TCP 数据流捕获的全链路解决方案
android·tcp/ip·ios·小程序·https·uni-app·iphone
游戏开发爱好者817 小时前
APP上架苹果应用商店经验教训与注意事项
android·ios·小程序·https·uni-app·iphone·webview
hyswl66619 小时前
数字货物搬家小程序
python·小程序
郭俊强20 小时前
小程序RSA、AES加密
小程序
2501_9160074721 小时前
苹果应用商店上架的系统逻辑,从产品开发到使用 开心上架 上架IPA 交付审核流程
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
Python抓包HTTPS详解:Wireshark、Fiddler、Charles等工具使用教程
python·ios·小程序·https·uni-app·wireshark·iphone
刻刻帝的海角1 天前
uniapp引入qqmap-wx-jssdk实现微信小程序端获取用户当前位置
微信小程序·小程序·uni-app
2501_916008891 天前
uni-app 上架到 App Store 的项目流程,构建、打包与使用开心上架(Appuploader)上传
android·ios·小程序·https·uni-app·iphone·webview
桐溪漂流1 天前
微信小程序路由及 `EventChannel` 通信
微信小程序·小程序
00后程序员张1 天前
怎么在 iOS 上架 App,从构建端到审核端的全流程协作解析
android·macos·ios·小程序·uni-app·cocoa·iphone