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

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

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

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

page.json:

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

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

相关推荐
低代码布道师2 小时前
互联网医院18:前端进阶——CSS“父相子绝”打造专业级卡片交互
前端·css·低代码·小程序·云开发
说私域3 小时前
开源活动报名AI智能客服AI智能名片预约服务小程序在精神服务中的应用场景研究
人工智能·小程序
计算机毕设指导65 小时前
基于微信小程序的家政服务与互助平台【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
说私域7 小时前
开源悬赏活动报名AI智能名片链动2+1模式商城小程序的应用与价值
人工智能·微信·小程序·开源
计算机毕设指导68 小时前
基于微信小程序的个性化漫画阅读推荐系统【源码文末联系】
java·python·微信小程序·小程序·tomcat·maven·intellij-idea
百锦再8 小时前
开发抖音小程序组件大全概述
人工智能·python·ai·小程序·aigc·notepad++·自然语言
Lucky小黄人20 小时前
微信小程序开发常见报错
微信小程序·小程序
初学者52131 天前
微信小程序调用录音没反应,本地开发测试却没问题,operateRecorderfail appid privacy api banned
微信小程序·小程序
微爱帮监所写信寄信1 天前
微爱帮监狱寄信写信小程序信件内容实时保存技术方案
java·服务器·开发语言·前端·小程序
说私域1 天前
基于开源AI大模型AI智能名片S2B2C商城小程序的内容价值生成与多点选择传播策略研究
人工智能·微信·小程序·开源