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

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

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

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

page.json:

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

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

相关推荐
超级新零售7 小时前
服装订货会数字化:商品版本、订单状态与后续配发数据如何衔接?
大数据·小程序·企业微信
xiezhr11 小时前
我用workBuddy开发了自己的第一个小程序并成功上线了
ai·小程序·ai agent·workbuddy
sinat_2676119119 小时前
用 AI 开发微信小程序(八):一个极简收纳工具的开发复盘
微信小程序·小程序
李纲明1 天前
微信小程序真机预览白屏或 request 失败:先核 request 合法域名与 TLS,再查体验版与本地缓存
缓存·微信小程序·小程序·小程序开发·devdiy·真机预览·合法域名
klfdgl1 天前
线上商城小程序投入测算,有成熟开发经验服务商的长期收益对比
小程序
一木 之林2 天前
Dify学习笔记 03 · RAG检索增强生成:三代范式、评估与落地(第40-45、55-56集)
笔记·小程序·交互·dify
赵小哥要冲啦2 天前
社区邻里互助小程序从 0 到 1 复盘:需求拆解与信任机制设计
java·小程序·需求分析
河北清兮网络科技2 天前
石家庄做一套企业知识库系统多少钱?2026 报价明细
小程序·短剧app·广告联盟
Ai-_Man2 天前
Coze扣子还是不可以导出左侧所有对话,只能点进去单条内容导出,方法不对吗?
开发语言·人工智能·ai·小程序·1024程序员节
微订校园外卖平台2 天前
新手做校园外卖平台:小程序启动顺序与订单链路验收
小程序·外卖系统·本地生活·微订