uniapp取消原生顶部导航栏的方法

最新推荐文章于 2025-07-03 10:26:31 发布

原创最新推荐文章于 2025-07-03 10:26:31 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在小程序中全局或单页面取消默认导航栏样式。通过在配置文件pages.json中设置navigationStyle为custom来实现。

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

1、全局取消

所有页面都去掉：在pages.json里配置navigationStyle:custom

2、单页面取消

在该路由下添加navigationStyle:custom即可

{
    "path": "pages/me/me",
	"style": {
		"navigationStyle": "custom"
	 }
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xuefine

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Uniapp去除顶部导航栏-小程序、H5、APP适用

m0_47814717的博客

11-07

4233

局部或全局去除页面顶部导航栏配置，小程序、H5、APP适用

uniapp：uniapp修改图标，去掉原生导航，自定义导航，导航不跟着页面走。

薇眠winter的博客

09-19

3151

uniapp：uniapp修改图标，去掉原生导航，自定义导航，导航不跟着页面走。

参与评论您还未登录，请先登录后发表或查看评论

uniapp开发微信小程序取消原生导航栏+自定义导航栏

m0_66879773的博客

03-22

2239

在page.json中需要取消的页面中加入。如图：将页面中的原生导航取消。

uniapp 取消顶部导航栏（uniapp一栏）

最新发布

weixin_44908793的博客

07-03

在不需要顶部导航栏的页面路径加上"navigationStyle": "custom"这个属性即可。

uniapp项目怎么删除顶部导航栏

m0_55333789的博客

01-10

2907

uniapp项目怎么删除顶部导航栏

uniapp 去除顶部导航栏（隐藏导航栏）

Binglianxiaojiao的博客

03-26

3108

开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。在具体路由下面的style中配置 "navigationStyle":"custom"3、根据平台去除导航栏（举例H5端）全部配置都在page.json文件。1、全平台去除导航栏。2、单页面去除导航栏。

uniapp禁用原生导航栏

SSophia的博客

05-15

636

用法：pages.json文件。

uniapp取消顶部导航栏

02-26

### 如何在 UniApp 中取消或隐藏顶部导航栏 #### 方法一：配置 `manifest.json` 文件通过修改项目的全局样式设置来移除顶部导航栏是一个有效的方法。具体来说，在 `manifest.json` 的 `globalStyle` 字段下调整...

uniapp关于支付宝小程序或钉钉小程序标题栏自定义.txt

12-30

### uniapp中支付宝小程序与钉钉小程序标题栏自定义详解 #### 一、背景介绍在uniapp开发过程中，为了适应不同的小程序平台（如微信、支付宝、钉钉等），开发者经常需要对页面进行定制化处理，以满足不同平台的...

支付宝小程序的页面顶部导航栏 navbar 的知识点

廖若星辰-LTY

01-15

1488

支付宝平台最主要是配置"transparentTitle": "always" 这一项！此时页面的标题栏区域会消失，我们书写的第一个非定位元素会排列到手机整个屏幕可用区域的最顶部（会出现在原本是标题栏所在的位置），此时我们就可以自行书写我们自己需要的标题栏了（注意要适配手机顶部安全区域）此时页面的标题栏区域是消失了，但是上面提到的页面导航栏区域的按钮并不会消失

uniapp自定义顶部状态栏

12-31

为了自定义顶部状态栏，在 `pages.json` 文件中设置 `"navigationStyle": "custom"` 来取消默认的原生导航栏[^3]。 ```json { "path": "pages/index/index", "style": { "navigationStyle": "custom" } } ``` ...

uni-app 之去掉顶部导航

jun_tong的博客

09-22

3560

uni-app 之去掉顶部导航

uniapp 去掉默认导航栏

qq_17627195的博客

08-02

605

uniapp 去掉默认导航栏。

uniapp取消默认导航栏

weixin_45799605的博客

03-17

2538

"navigationStyle":"custom", 取消全局默认顶部导航栏

uniapp-006-配置去掉原生导航栏

浪漫韫秋

02-14

334

在H5中和在APP和小程序当中，效果是不太一样的。在pages.json当中进行如上所示的配置。因为H5当中是没有一个状态栏的。这就是取消了原生导航栏的效果。实现搜索效果，不好实现。第三：内容，卡片形式。，会跳转到新的页面。

uniapp取消默认的原生导航栏

徐同保的专栏

08-22

695

uniapp取消默认的原生导航栏

uni-app 全局去掉顶部原生导航栏；uni-app 页面单独设置不使用原生导航

weixin_44249754的博客

09-15

4011

想要去掉所有的原生导航，只需要在pages.json中加上配置： "globalStyle": { //去掉默认导航 "navigationStyle": "custom", "app-plus": { "titleNView": false }, }, 去掉某个页面的原生导航，只需要在pages.json中加上配置： "pages": [{ { "path": "pages/index/index", "style": { "navigationS.

uni-App 去掉顶部导航栏

Sapling

11-22

5446

1、给一个单独的页面隐藏顶部的导航栏，可以在pages.json里单独的路由style下面配置 “app-plus”: {“titleNView”: false}2、给整个app 隐藏可以在globalStyle 下配置一个style “app-plus”: {“titleNView”: false}uni-App 去掉顶部导航栏。