uni-app 连续返回导致无法点击

uni-app 连续返回导致无法点击

bug描述：

因项目涉及隐私，无法贴代码、图片。 视频我已经发给uni-im的管理。 我举一个小李子： 我在uniapp中有3个页面，分别是A、B、C。其中A点击按钮跳转B，B点击按钮跳转C，C是一个webview页面，C返回B没有问题，页面正常操作（点击B页面按钮、操作数据、返回上一页都没问题），但是C返回B后，B页面中有一个onshow事件，事件监听到webview返回传递的消息会返回上一个页面A，那么A就出问题了，A页面无法点击，任何操作都不行，需要等待10秒左右。

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11 家庭中文
HBuilderX类型 正式
HBuilderX版本号 4.57
第三方开发者工具版本号 2412050
基础库版本号 3.7.11
项目创建方式 HBuilderX

更多关于uni-app 连续返回导致无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

提供下 vue 版本，说明是 cli 还是 HBuilderX 项目。说明下 a - b - c 是 navigateTo 吗。 b 的 onShow 代码具体贴一下。webview 传递的是什么。你新建一个空白工程做个说明吧。

更多关于uni-app 连续返回导致无法点击的实战教程也可以访问 https://www.itying.com/category-93-b0.html


a跳b、b跳c都是使用navigateTo，c是webview页面，小程序只有在特定的事件才能通过webview回调消息，所以我使用了jWeixin.miniProgram.navigateBack（app端我使用uni.navigateBack），返回层级是1，这样c就回到了b页面，b页面我在onshow中判断了c是否传递参数过来的，如果传递了参数，那么直接返回上一次，也还是使用 uni.navigateBack。结果就是上面说的无法点击，小程序无法点击，安卓是白屏2秒左右后（无法点击好像，具体我忘记了），如果在b页面即使收到参数也不返回，那么就没问题。全程可以不需要参数，没必要传参数，只是业务需要传了参数，我测试了不穿参数一样的效果。

回复 8***@qq.com: 看下我的回复，说明 vue 版本，具体代码贴一下，给一个复现工程。提供更多信息，有助于定位和解答你的问题。

这是一个典型的页面生命周期管理问题。从描述来看，主要问题出在B页面的onShow事件处理逻辑上。

当从C返回B时，B的onShow事件触发并立即执行了返回A的操作，这会导致页面栈管理混乱。建议检查以下方面：

  1. B页面的onShow事件中是否有立即执行uni.navigateBack()的逻辑？这种快速连续返回容易导致页面渲染阻塞。

  2. 可以尝试在onShow中加入延迟执行：

onShow() {
  setTimeout(()=>{
    uni.navigateBack()
  }, 300)
}
  1. 或者考虑改用页面通信方式代替直接返回：
// B页面
onShow() {
  const pages = getCurrentPages()
  if(pages.length > 1) {
    const prevPage = pages[pages.length - 2]
    prevPage.$vm.handleWebviewMsg(data) // 将消息传递给A页面处理
    uni.navigateBack()
  }
}
回到顶部