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

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

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

3 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #java #前端 #javascript

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

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

            "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

分享到新浪微博

扫一扫
举报

举报

【商城实战(51)】从uniapp商城到PC端的华丽转身：适配与优化全攻略

邓邓子的博客

03-20

1142

本文围绕 PC 端商城的优化展开。在布局调整上，介绍 PC 屏幕尺寸特点，借助 uniapp 方案及案例实现灵活适配。交互优化涵盖鼠标悬停、键盘操作，提出综合策略。加载速度提升从优化图像、减少 HTTP 请求、利用缓存与 CDN 着手。经优化，商城布局合理、交互体验提升、加载速度大幅加快。后续可在交互细节、加载技术等方面探索，如引入 3D 交互、采用 HTTP/3、利用人工智能预加载及 WebAssembly 技术，以持续提升用户体验，增强竞争力。

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

shuux666的博客

03-03

939

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

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

uni-app导航栏自定义“返回按钮”多种方法设置原生返回

最新发布

小赵的博客

06-12

1284

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

uniapp左上角导航返回事件

pjm2222的博客

07-13

6092

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

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

weixin_41463944的博客

09-01

1402

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

uniapp中的uni-nav-bar去掉左边的返回按钮

m0_65337466的博客

07-08

3828

uniapp中的uni-nav-bar

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

廖若星辰-LTY

01-15

1475

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

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

weixin_43926335的博客

12-03

1529

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

【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页

Qxn530的博客

09-13

1万+

点击左上角返回按钮，弹出弹窗、获取下一页的数据，也就是点击返回按钮时，把这一页数据带回上一页、跳转页面并携带参数，接受页获取参数

【uni-app】左上角返回按钮跳转到指定页面

loyd3的博客

04-30

6775

左上角的三角符号 onBackPress(event){ uni.redirectTo({ url:'../index/index' }); return true; }, 加在onLoad的同一级

uniapp左上角按钮返回，返回到指定页面

w_0217的博客

08-04

5190

uniapp左上角按钮返回，返回到指定页面 onUnload(){ uni.navigateBack({ delta:2 }) },

uniapp左上角返回按钮跳转，返回按钮事件

MJOY791270505的博客

09-15

2406

uniapp返回按钮跳转

uniapp的原生导航栏返回键

snow_living的博客

08-16

5422

记录类似新闻页跳转到详情在返回到当前页。

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

m0_74265396的博客

12-16

2305

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

uniapp自定义导航栏返回按键

m0_49714202的博客

11-21

2228

uniapp自定义导航栏返回按键

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

weixin_45723025的博客

08-23

3298

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

UniApp 导航栏设置完全指南」：新手入门必备，图标、颜色、返回功能全解析！「手把手教你玩转 UniApp 导航栏设置，轻松打造个性化页面！」「UniApp 顶部导航栏详解：一步步实现颜色、返回

南北极之间

12-26

3359

UniApp 导航栏设置完全指南」：新手入门必备，图标、颜色、返回功能全解析！「手把手教你玩转 UniApp 导航栏设置，轻松打造个性化页面！」「UniApp 顶部导航栏详解：一步步实现颜色、返回图标、全局样式」「UniApp 导航栏教程：从基础到高级，学会颜色设置与自定义导航」「新手前端指南：如何优雅地自定义 UniApp 导航栏？」「超简单！UniApp 导航栏设置入门教程，颜色、返回按钮一网打尽」「UniApp 实用技巧：页面导航栏设置新手指南（含详细代码解析）」「从零开始！UniApp

uniapp顶部导航栏的返回按钮添加事件

10-13

在 UniApp 开发中，如果你想为顶部导航栏的返回按钮添加点击事件，通常是在 Vue 组件中通过监听 `popstate` 或者 `navigator` 对象的变化来实现。这里是一个简单的示例： ```javascript <template> <view class="container">  <navigator :url="currentUrl" @popstate="handlePopstate"></navigator> </view> </template> <script> export default { data() { return { currentUrl: '', // 当前页面的 URL }; }, methods: { handlePopstate(e) { // 这里是当用户点击返回按钮时的回调函数 console.log('用户点击了返回按钮'); // 如果你想在特定条件下阻止默认行为，可以在这里添加相应逻辑 e.preventDefault(); } }, watch: { $route(to, from) { this.currentUrl = to.fullPath; } } }; </script> ``` 在这个例子中，`@popstate` 是 Vue 的自定义事件监听器，它会在用户点击浏览器的前进/后退按钮或者应用内的返回按钮时触发。`handlePopstate` 函数会被调用，并可以在其中处理你的业务逻辑。