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

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

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

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

page.json:

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

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

相关推荐
!win !2 分钟前
uni-app项目支付宝端Input不受控
小程序·uni-app·支付宝小程序
毕设源码-钟学长2 小时前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
毕设源码-赖学姐19 小时前
【开题答辩全过程】以 “饭否”食材搭配指南小程序的设计与实现为例,包含答辩的问题和答案
小程序
nodcloud20 小时前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
老华带你飞1 天前
畅阅读小程序|畅阅读系统|基于java的畅阅读系统小程序设计与实现(源码+数据库+文档)
java·数据库·vue.js·spring boot·小程序·毕设·畅阅读系统小程序
老华带你飞1 天前
租房平台|租房管理平台小程序系统|基于java的租房系统 设计与实现(源码+数据库+文档)
java·数据库·小程序·vue·论文·毕设·租房系统管理平台
项目題供诗1 天前
微信小程序开发教程(八)
微信小程序·小程序
00后程序员张2 天前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师2 天前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪2 天前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码