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

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

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

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

page.json:

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

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

相关推荐
沉默-_-1 小时前
微信小程序网络请求 wx.request 详解
网络·学习·微信小程序·小程序
2501_915909062 小时前
设置了 SSL Pinning 与双向 TLS 验证要怎么抓包
网络·网络协议·ios·小程序·uni-app·iphone·ssl
龙兵科技小付说7 小时前
不同价格的上门做饭小程序APP都有什么功能?
小程序·软件开发·上门做饭
2501_916007478 小时前
如何查看 iOS 设备系统与硬件信息,iOS系统信息显示工具
android·ios·小程序·https·uni-app·iphone·webview
逆龙泰氽9 小时前
微信小程序开发04-1(小程序API)
微信小程序·小程序
说私域9 小时前
AI智能名片S2B2C商城小程序在微商中的应用与影响
大数据·人工智能·小程序·流量运营
苏苏哇哈哈10 小时前
微信小程序实现高性能动态配置水滴凹槽、凸起Tabbar 组件
微信小程序·小程序
逆龙泰氽10 小时前
微信小程序开发03(WXML语法)
微信小程序·小程序
2501_9160074710 小时前
iOS APP 开发,从项目创建、证书与描述文件配置、安装测试和IPA 上传
android·ios·小程序·https·uni-app·iphone·webview
CHU72903510 小时前
淘宝扭蛋机小程序前端功能详解:以交互设计赋能趣味体验
java·前端·小程序·php