微信小程序学习（六）：隐藏单个页面的标题栏（导航栏）

最新推荐文章于 2025-03-17 10:20:06 发布
最新推荐文章于 2025-03-17 10:20:06 发布
阅读量1.2w 收藏 6
点赞数 1
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yys190418/article/details/97932574
版权
本文介绍了一种在特定页面隐藏标题栏（导航栏）的方法，通过使用navigationStyle:custom代码实现，适用于微信版本7及以上。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

隐藏单个页面的标题栏（导航栏）

这个问题我遇见很久了，一直没有解决，一开始我看网上说是目前不支持，
今天看的时候，突然发现了好多说怎么做的，以下是解决办法，

请坚持看完

首先就是代码

"navigationStyle": "custom"

这个放到需要隐藏的页面，我放上去之后是这个样子的
在这里插入图片描述
本来以为不好使，但是看了看文档，文档上说是在微信7（好像是6.6，具体忘了）版本后就支持了，
所以就真机预览了一下，
结果就好使了，放图片
在这里插入图片描述
结果就好使了，原来是电脑的版本不对，电脑不支持，
个人设置完了真机预览或真机调试看看就行了

亏我一开始以为不能用，还耽误这么久

微信小程序---隐藏导航栏加载框和停止下拉动作
weixin_51494148的博客
06-19 268
微信小程序—隐藏导航栏加载框和停止下拉动作。
微信小程序之子页面动态修改导航栏标题文字内容
夜阑珊妖妖
05-04 1937
在实际的项目开发中，一般我们页面导航栏的标题文字都不是固定的，而是根据场景需要动态设置的，这个如何实现呢。微信官方提供的方法如下： 1.设置动态的 onLoad: function (options) { wx.setNavigationBarTitle({ title: options.name }) // options.name表示上个页面传过来的文字 }, 2.直接设置 onLoad: function (options) { wx.setNavigationBarTitle({ ti.
小程序页面顶部标题栏、导航栏navigationBar如何隐藏、变透明？
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-10 6593
小程序顶部的白色背景条就不见了，直接变透明，只剩下右上角的胶囊按钮。
Uniapp WebView 全屏导致遮挡状态栏的解决方案
最新发布
qq_60743005的博客
03-17 559
当使用 WebView 组件时，默认情况下 WebView 会占据整个屏幕，包括状态栏区域，导致状态栏内容被遮挡。为了确保状态栏可见，我们需要动态调整 WebView 的布局。
【微信小程序】 隐藏小程序 导航栏/TabBar
Daivon_Up的博客
07-26 1万+
1、页面不存在于app.json中的 tabBar.list 2、使用wx.navigateTo 跳转到新页面 3、 微信基础库1.9.0开始支持api wx.hideTabBar/wx.showTabBar wx.hideTabBar({ animation:true //是否需要过渡动画 }) wx.showTabBar({ animation:true //是否需要...
微信小程序怎么隐藏顶部导航栏（navigationBar）变透明的解决方案
南通SEO
09-12 3875
怎么隐藏小程序顶部导航栏（navigationBar）？Navigation是小程序的顶部导航组件，当页面配置设置为custom的时候可以使用此组件替代原生导航栏。
微信小程序隐藏标题栏navigationBar的方法
热门推荐
08-02 2万+
未隐藏前： 在app.json里面window选项里面设置一下： 最终显示效果： 这样就没有了标题栏
微信小程序自定义导航栏
10-30
微信小程序提供了丰富的API和事件，如`wx.setNavigationBarTitle`用于动态修改导航栏标题，`wx.hideNavigationBarLoading`和`wx.showNavigationBarLoading`控制加载指示器的显示，以及`onReachBottom`事件，可以监听...
微信小程序自定义导航栏：胶囊按钮与返回功能实现
"该资源主要讲解了微信小程序中如何实现胶囊按钮返回和首页功能，特别是在页面栈只有一个时如何自定义导航栏。提供了一个GitHub项目链接，该项目包含了实现这一功能的代码示例。文章指出，从分享页进入小程序时，...
一文读懂微信小程序 flex 布局：项目属性全面解析
前端基地
02-27 945
本文聚焦微信小程序的 flex 布局项目属性，详细讲解了 order，它决定元素排列顺序；align - self，可控制单个元素在交叉轴上的对齐方式；flex，能灵活分配元素空间。通过阐述这些属性，助力开发者精准运用 flex 布局优化小程序页面排版 。
小程序隐藏单个页面的标题栏 -- 导航栏
zxh7770的博客
01-13 4736
阐述 一开始网上搜索，只能在app.json中的window里面设置 “navigationStyle”: “custom” ，这样小程序所有页面都没有导航栏了，只保留右上角胶囊按钮，后来经过自己网上查阅资料。在单页面也可以设置。 注意： iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持 全局设置导航栏，隐藏 app.json设置 – “navigationStyle”: “custom” PS：从app.json中设置所有页面都会生效，导航消失。 "wind
微信小程序滑动显示/隐藏状态栏
weixin_46265708的博客
10-30 4313
我们在开发应用的时候经常会遇到各种需求，比如有时候我们想要实现这种效果，想要让顶部的导航栏跟随页面的滑动实现隐藏和显示，这个时候就需要发动我们的小脑筋想一下要如何实现了在实现功能之前，首先我们要明白功能的实现方式以及原理。简单来看就是两个步骤：1、导航栏的显示和隐藏（可以通过页面的json文件设置）2、监听屏幕滑动去控制显示和隐藏属性值的变化。
uniapp开发微信小程序之隐藏头部导航栏
only_zing的博客
05-29 3572
微信小程序自定义头部导航栏、局部或全局隐藏导航栏
微信小程序添加页面顶部固定标题栏navigationBar，以及部分页隐藏
Ronion123的博客
01-15 3011
2.当某个页不需要头部样式，需要覆盖全屏只留下返回胶囊时，可以在指定page页下的json文件内添加"navigationStyle": "custom"3.当不使用官方的标题栏时，你也可以设计自己的头部栏，下面是我自己的，效果为logo图靠左居中(靠左是考虑到部分手机的灵动岛遮挡)，大家可以自己更改细节。1.在各个页添加头部固定样式，可以在app.json内设置。navigationBarTitleText：标题名称。navigationStyle：导航栏样式。
微信小程序开发：取消标题栏，让小程序页面变得更UI
weixin_52312427的博客
02-28 797
开发小程序的时候发现将传统风格的应用作为主页太丑了，所以想取消标题栏。那如何取消？
原生微信小程序 使用默认导航栏 特定页面隐藏导航栏左侧的返回/home按钮 - wx.reLaunch + wx.hideHomeButton
m0_48968874的博客
04-29 1277
使用微信小程序的默认导航栏，在特定页面隐藏导航栏左侧的返回/home按钮效果。
微信小程序-隐藏和显示自定义的导航
weixin_33691817的博客
06-13 525
微信小程序中不能直接操作window对象，document文档，跟html的树结构不相同。 实现类似导航的隐藏显示，如图效果： 点击网络显示或隐藏网络中包含的内容。其他类似。 如果是jquery很方便实现，能直接操作document。在微信小程序中实现思路是：在逻辑层定义变量，通过setData赋值。 方法一：通过变量直接赋值，给每一个要控制显示的view定义变量 .wxml 代码：...
微信小程序、钉钉小程序如何去掉导航栏
GDNLQ的博客
04-01 1120
微信小程序、钉钉小程序提供的导航栏有时候满足不了需求，这时就需要去掉默认导航栏，然后自己做一个，或者写成公共组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值