uni-app 页面存在subNview时原生导航栏返回按钮触发两次直接返回到上上个页面

uni-app 页面存在subNview时原生导航栏返回按钮触发两次直接返回到上上个页面

开发环境 版本号 项目创建方式
Windows 3.4.7 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：3.4.7

HBuilderX类型：正式

HBuilderX版本号：3.4.7

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：mate40

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

{
    "path": "pages/Office/Index",  
    "style": {  
        "navigationBarTitleText": "办公",  
        "navigationBarBackgroundColor": "#006EFF",  
        "backgroundColor": "#FFFFFF",  
        "navigationBarTextStyle": "white",  
        "app-plus": {  
            "bounce": "none",  
            "subNVues": [{  
                "id": "bizNav",  
                "path": "pages/Office/SubNVue/bizNav",  
                "type": "popup",  
                "style": {  
                    "position": "absolute",  
                    "dock": "right",  
                    "width": "100%",  
                    "height": "100%"  
                }  
            }]  
        }  
    }  
}

操作步骤：


### 预期结果：

实际结果：


### bug描述：

bug，我在Tab页的subNView中放置了一个webview作为外部页面浏览使用，当开启webview打开过链接后，后续再打开其他页面，原生导航栏返回按钮会触发两次，直接跳到上上个页面，如果历史页面不够，会直接退出app，bug触发概率：50%，当网络情况不好，webview页面未能完全加载完成时容易出现。

[录屏.zip](//ask.dcloud.net.cn/file/download/file_name-5b2V5bGPLnppcA==__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMjA1MjMvYTY5ZDgxM2JjY2FiNjI2YWIwY2I0YzA1OTFhMWNkOTQ=)

更多关于uni-app 页面存在subNview时原生导航栏返回按钮触发两次直接返回到上上个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 页面存在subNview时原生导航栏返回按钮触发两次直接返回到上上个页面的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发应用时，如果你在页面中使用了 subNVue（原生子窗体），并且遇到了原生导航栏返回按钮触发两次，导致直接返回到上上个页面的问题，这通常是因为事件处理逻辑不当导致的。

问题原因

  1. 事件重复绑定：可能在 subNVue 中绑定了返回按钮的事件，同时 uni-app 的页面也监听了返回按钮的事件，导致返回事件被触发两次。
  2. 事件冒泡：subNVue 中的事件可能冒泡到了 uni-app 的页面层，导致事件被多次触发。

解决方案

  1. 检查事件绑定：

    • 确保 subNVue 中的返回按钮事件和 uni-app 页面中的返回按钮事件没有重复绑定。
    • 如果 subNVue 中已经处理了返回事件，uni-app 页面中就不需要再处理。

  2. 阻止事件冒泡：

    • 在 subNVue 中处理返回事件时，确保事件不会冒泡到 uni-app 页面层。可以通过 event.stopPropagation() 来阻止事件冒泡。

  3. 使用 uni-app 的导航栏：

    • 如果 subNVue 不需要自定义导航栏，可以尝试使用 uni-app 自带的导航栏，减少事件的冲突。

示例代码

假设你在 subNVue 中有一个返回按钮，你可以这样处理：

// subNVue 中的返回按钮事件处理
document.getElementById('backButton').addEventListener('click', function(event) {
    event.stopPropagation(); // 阻止事件冒泡
    // 处理返回逻辑
    uni.navigateBack({
        delta: 1
    });
});

在 uni-app 页面中，如果你不需要处理返回事件，可以移除相关代码：

// uni-app 页面中不需要处理返回事件
onBackPress() {
    // 如果 subNVue 已经处理了返回事件，这里可以不做处理
    return false;
}
回到顶部