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

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

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

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

代码实现

一、全局顶部导航栏隐藏

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

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

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

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

app.json:

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

page.json:

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

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

相关推荐
mykj155113 小时前
不止简单下单,代驾小程序系统打造完整智慧出行服务
小程序·代驾小程序开发·代驾小程序定制·代驾app软件
從南走到北14 小时前
JAVA无人共享系统无人场馆预约篮球系统源码支持小程序+公众号+APP+H5
java·开发语言·小程序
码农学院14 小时前
基于小程序云开发与Node.js的餐饮行业AI优化方案:智能推荐与订单预测实战
人工智能·小程序·node.js
mykj15512 天前
教培机构考公刷题小程序系统开发,降本增效稳续费
小程序·考公刷题小程序·刷题app开发
投票竞赛2 天前
6 类细分场景在线投票工具,微信小程序亲测测评精准匹配对应评选需求
小程序
这是个栗子2 天前
uni-app微信小程序开发:高频核心 API(三)
微信小程序·小程序·uni-app
quweiie2 天前
thinkphp8结合jwt与微信小程序接口鉴权
微信小程序·小程序·thinkphp接口·接口鉴权
黄华SJ520it3 天前
预约上门系统开发:懒人经济下的商业机遇与技术实践
小程序·系统开发
软件技术新观察4 天前
2026年北京教育医疗小程序与APP定制开发:十大服务商实力测评
大数据·小程序
万岳科技程序员小金4 天前
真人数字人小程序如何开发?AI数字人平台搭建流程全面解析
人工智能·小程序·ai数字人系统源码·ai数字人平台搭建·ai数字人小程序开发