记录uniapp去除导航栏左侧返回按钮不生效问题

最新推荐文章于 2025-06-12 11:27:55 发布

原创最新推荐文章于 2025-06-12 11:27:55 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #java #前端 #javascript

文章讲述了在使用Uniapp时，尽管官网设置了不显示导航栏左侧的返回按钮，但未生效。作者提供了解决方案，即在页面渲染完成后通过JavaScript动态隐藏`uni-page-head-hd`元素以达到目的。

            "path" : "pages/xxxxx/xxxxxx",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "xxxxxxx",
                "enablePullDownRefresh": false,
				"titleNView":{
					"autoBackButton": false  //标题栏控件是否显示左侧返回按钮
				}
            }

如上所示，按照uniapp官网设置，并没有生效，还是存在导航栏左侧返回按钮。

解决：

在页面渲染完成后找到元素并让其隐藏！

		mounted() {
			document.querySelector('.uni-page-head-hd').style.display = 'none'
		},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前进的攻城狮

关注关注

3
点赞
踩
3

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uni-app页面顶端去掉返回按钮

hnfeile018的博客

05-26

1万+

今天在使用uni-app开发登录页面时，碰到登录页面要去掉左侧的返回按钮，现已实现具体方法如下一、首先再根目录pages.json文件内的pages数组中所要隐藏返回按钮的页面style下加入 "app-plus": { "titleNView": { "autoBackButton":false } } ...

隐藏导航栏返回按钮的方法

RaAutoit的博客

09-27

2578

在UniApp中，如果你想要隐藏导航栏的返回按钮，你可以通过以下步骤来实现。完成上述步骤后，保存配置文件并重新编译和运行你的UniApp应用程序。在运行时，你将看到导航栏上的返回按钮已经被隐藏了。，你可以在UniApp中隐藏导航栏的返回按钮。这样可以提供更灵活的导航栏定制选项，以满足你的应用程序的需求。首先，找到你想要隐藏返回按钮的页面，然后打开该页面的配置文件。的值设置为一个新的对象，并在该对象中添加一个。的值修改为你的页面标题，同时确保将。是用来设置导航栏的其他选项的。为后缀的文件，与页面的。

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

uniapp中获取位置取消授权问题chooseLocation:fail auth deny

l17862868372的博客

06-02

2611

记录uni-app开发小程序用户取消弹框的权限，后边就不出权限弹框，而且也不报错，直接走fail问题： getLocation(){ uni.chooseLocation({ success: (res) =>{ console.log('位置名称：' + res.name); console.log('详细地址：' + res.address); console.log('纬度：' + res.latitude);

关于iOS导航栏返回按钮问题的解决方法

09-02

主要为大家详细介绍了关于iOS导航栏返回按钮问题的解决方法，对iOS自定义backBarButtonItem的点击事件进行介绍，感兴趣的小伙伴们可以参考一下

uniapp显示/隐藏导航栏左侧返回按钮

weixin_44708899的博客

01-08

2188

uniapp显示/隐藏导航栏左侧返回按钮

uniapp 隐藏头部导航栏默认返回按钮

weixin_41463944的博客

09-01

1488

uniapp 隐藏头部导航栏默认返回按钮

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

廖若星辰-LTY

01-15

1790

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

记录一些uniapp开发小程序遇到的问题【持续更新】

weixin_43436640的博客

02-23

1729

看u-input源码，@input和@change方法都是绑定的valueChange方法，清除方法onClear如下，先赋值为空然后在nextTick中改变已有值，但是在小程序中由于某种机制会在点击清除时优先为失焦状态，此时清除按钮被隐藏，或者有时候先触发清除，但是由于又触发了input和change又把原来的值给赋值上去了导致出现问题，所以解决办法就是如下将清空方法修正，，增加一个settimeout延时清空即可。

微信小程序顶部自定义导航 “navigationStyle“: “custom“ 真机iPhone6/7/8不显示胶囊按钮

li222248的博客

01-14

8908

微信小程序顶部自定义导航 “navigationStyle”: “custom” 要实现这种效果图 1、在哪个页面上实现自定义导航栏就在哪个页面的 .json 文件中写上： “navigationStyle”: “custom” ，如果在app.json写那就是所有的页面都会变成通栏 { "component": true, "navigationStyle": "custom" } 2、页面的.wxml代码： <view class="navbar" style="height:{{n

{ "path": "pages/weekProduct/weekList", "style": { "navigationBarTitleText": "", "navigationStyle": "custom", "enablePullDownRefresh": true, "transparentTitle": "always", "titlePenetrate": "YES", "showTitleLoading": "NO", "allowsBounceVertical": "NO", "gestureBack": "NO", "softInputMode": "resize" } }, 帮我分析一下这个代码，需求是，uniapp开发的支付宝小程序，现在要求去掉顶部导航左侧的返回按钮，通过样式隐藏也可以，按照如上操作，返回按钮依旧显示出来，如何分析问题并且解决

热门推荐

飙歌的博客

01-24

1万+

方法一、 导航栏返回按钮事件。

uni-app微信小程序隐藏左上角返回按钮

m0_74265396的博客

12-16

2444

首先要明确的是页面间的跳转方式有几种、每一种默认的作用是什么。使用2、4种跳转方式使用;uniapp五种跳转方式。

【uniapp】解决autoBackButton不生效和onNavigationBarButtonTap不起作用问题:

SunPeng的博客

09-04

4810

【uniapp】解决autoBackButton不生效和onNavigationBarButtonTap不起作用问题:

uni-app隐藏返回按钮

小赵的博客

06-12

2295

在uni-app中隐藏返回按钮的几种方法：1. 使用uni.hideHomeButton()（仅部分平台有效）；2. 通过pages.json配置全局或单页面隐藏导航栏；3. H5平台可用DOM操作隐藏元素；4. 使用uni.redirectTo/reLaunch跳转方式；5. 自定义导航栏（推荐做法）；6. 处理物理返回键。建议优先使用pages.json的navigationStyle配置或自定义导航栏方案，不同平台需选择适配方案，隐藏后需确保提供替代的返回功能。

uniapp左上角导航返回事件

pjm2222的博客

07-13

6210

uniapp页面根据不同的业务场景返回不同的页面

uniApp导航栏左侧为什么不显示返回操作

qq_39966148的博客

01-03

1397

uniApp进行开发时，开发者可能会遇到导航栏左侧不显示返回操作

uniapp去除顶部返回按钮/返回键

weixin_60819463的博客

07-21

6248

其实很简单，一行代码就能搞定。

uniapp运行app 页面嵌入h5,返回键失效

weixin_43926335的博客

12-03

1558

解决方案:在web-view页面加入代码 onReady() { // #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview().children()[0]; currentWebview.addEventListener("loaded", function() { undefined currentWebview.evalJS( "mui.init({keyEventBind: {bac