uniapp去掉页面导航左上角的返回按钮

最新推荐文章于 2025-03-26 08:14:21 发布

不完美女孩-

最新推荐文章于 2025-03-26 08:14:21 发布

阅读量4.7k

点赞数 7

文章标签：前端 javascript uni-app

本文链接：https://blog.csdn.net/LJJONESEED/article/details/122963009

版权

在uni-app中尝试通过设置autoBackButton为false和display:none来隐藏页面头部的返回按钮，但未见效果。通过在mounted钩子中使用JavaScript操作DOM，将uni-page-head-hd类元素的display属性设为none，成功实现了隐藏返回按钮。这种方法对于处理uni-app中特定样式设置无效的情况可能有所帮助。

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

去掉这个返回按钮
在这里插入图片描述
在配置里面设置autoBackButton：false 然后没有效果
也设置了样式display:none 也是没有效果

那么，这样就好了

mounted(){
	var a = document.getElementsByClassName('uni-page-head-hd')[0]
	a.style.display = 'none';
},

在这里插入图片描述
完成效果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不完美女孩-

关注关注

7
点赞
踩
8

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

RaAutoit的博客

09-27

2256

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

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

hnfeile018的博客

05-26

1万+

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

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

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

热门推荐

FFqiufeng的博客

01-11

1万+

首先要明确的是页面间的跳转方式有几种、每一种默认的作用是什么。跳转方式：第一：wx.navigatorTo 【新页面打开，默认会有返回按钮】第二：wx.redirectTo【当前页面打开，默认无返回按钮】第三：wx.switchTab【只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换】第四：wx.reLaunch 【关闭所有页面，打开应用内某个页面，默认无返回按钮】第五：wx.navigateBack【关闭当前页面，返回上一页面或多级页面。可通过.

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

weixin_60819463的博客

07-21

5675

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

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

m0_74265396的博客

12-16

2241

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

uniapp vue3支付宝小程序自定义导航栏以后去除左上角返回按钮

11-27

uniApp中，在Vue3环境下创建支付宝小程序并自定义导航栏时，如果你想移除左上角的默认返回箭头，可以按照以下步骤操作： 1. 首先，确保你已经在`pages.json`文件中设置了对应页面的配置，例如： ```json { "pages...

详解微信小程序胶囊按钮返回|首页自定义导航栏功能

10-16

本文将深入探讨如何实现微信小程序胶囊按钮返回以及首页自定义导航栏的功能。首先，我们要理解为什么要自定义导航栏。在微信小程序中，当用户从转发的商品页面进入时，由于页面栈只有一个，系统默认的返回按钮会...

uniapp小程序去掉返回按钮

01-24

此方式会使得所有页面采用定制化的顶部区域设计，不再显示默认的小程序风格导航条（包括左上角的返回箭头），开发者需自行实现相应的交互逻辑[^1]。 #### 针对单个页面禁用返回按钮当仅需针对某个具体页面做处理...

uniapp去掉返回键

weixin_45879374的博客

03-31

1431

1、在pages.json配置导航栏 autoBackButton 属性 "path" : "pages/login", "style" : { "navigationBarTitleText": "登录", "app-plus": { "titleNView": { "autoBackButton": false } } } 2、在pages/login页 mounted 钩子里加上如下代码段

uniapp 微信小程序，去掉左上角返回按钮

m0_47843571的博客

05-16

2205

没法去掉，把原生的导航栏去掉，还是自己造一个吧 //这个是app用的 "style": { "app-plus": { //uni-app项目对应节点名称为"app-plus" "titleNView": { "autoBackButton":false } } } //这个方法写着没用，，在需要去掉的页面上添加 mounted（）{ var a = document.getElementsByClassName('uni-pag

uniapp怎么去掉默认的头部左侧返回按钮

stars______的博客

08-30

2181

【代码】uniapp怎么去掉默认的头部左侧返回按钮。

uni-app开发的微信小程序-打回登录页时会在左上角出现一个房子图标（返回首页）- 怎么回事-怎么解决

路虽远行则将至，事虽难做则必成。

09-08

4898

发现项目，在首次进入时打回登录页，原生导航栏左边会出现一个房子按钮可以直接返回首页最后查了一圈发现这个微信版本更新之后，当我们进入不是首页，或者tabbar页面时就会出现微信针对这个也是有解决方案的，可以在微信环境时把他禁用（在h5环境是不会出现的，只有微信有）还有一种办法，只有在原生导航栏时才会出现，我们如果禁用原生导航栏就从根本解决问题。

uni-app h5页面左上角出现“取消“字眼解决办法

a_靖的博客

07-14

3065

你知道VUE深入响应式原理吗？底层追踪数据变化渲染页面的原理是什么？ VUE1 和 VUE2 的实现原理：每个组件实例都对应一个watcher实例，它会在组件渲染的过程中把“接触”过的数据property记录为依赖。之后当依赖项的setter触发时，会通知watcher，从而使它关联的组件重新渲染。 VUE3 的实现原理： ...

uni-app开发的微信小程序隐藏返回首页按钮

xioxi

05-31

2972

// #ifdef MP-WEIXIN if(wx.hideHomeButton){ wx.hideHomeButton(); } // #endif

uniapp - 去掉头部导航栏返回键

小青柑的博客

02-21

1457

找到返回按钮的DOM元素 var a = document.getElementsByClassName('uni-page-head-hd')[0] a.style.display = 'none'

uniapp如何隐藏导航栏左侧的返回和home按钮

Yzfeng21的博客

09-19

1318

【代码】uniapp如何隐藏导航栏左侧的返回和home按钮。

uni-app 微信小程序导航栏隐藏返回隐藏小房子

weixin_42448623的博客

04-02

7199

问题隐藏返回按钮跳页方式 uni.navigateTo({url:"../warranty/warranty"}) 解决更改跳页方式 wx.reLaunch() /uni.reLaunch()会隐藏返回出现小房子 // uni-app uni.reLaunch({url:"../warranty/warranty"}) // wx wx.reLaunch({url:"../warran...