uni-app webview侧滑返回问题

uni-app webview侧滑返回问题

A页面中使用了webview内嵌h5，如果直接进入A页面，则h5无法侧滑返回上一页，但是如果先进入B页面，然后从B页面跳转到A页面，那么h5可以侧滑返回上一页。但是回到A页面后仍然可以再一次返回到B页面，这时不想侧滑返回到B页面应该如何做，因为B页面只是一个过渡页，什么内容都没有。

13 回复

4.81 alpha 已支持

更多关于uni-app webview侧滑返回问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好，你说的页面返回，是指的uniapp页面还是webview中的页面？

webview中的返回

这个h5是非uni开发的

回复 2***@qq.com: 这个侧滑就是按照页面栈的顺序，你这是想跳过一个栈页面返回吗？

回复 DCloud_UNI_yuhe: 因为直接进入A页面，h5后续的页面侧滑就都不生效了,所以我加了B页面，但是B页面什么都没有，所以我不希望从B页面跳转到A页面后，还能侧滑返回B页面，但其他页面还是能够侧滑返回

回复 DCloud_UNI_yuhe: 那这个有没有什么好的方案能够替换B页面啊

回复 2***@qq.com: 你是通过什么方式进入的页面 B？你试一下使用 onBackPress 能够拦截到从 A 页面的返回吗？

提供一个简单可复现的 demo 测试看看

已复现，已加分，预计下个版本修复

你好，这个问题有修复吗

回复 2***@qq.com: 下个版本

在uni-app中，webview组件的侧滑返回行为与页面栈管理相关。根据你的描述，可以通过以下方式解决：

  1. 在B页面跳转时使用uni.redirectTo替代uni.navigateTo
    这样会替换当前页面栈，从B跳转到A后，B页面会被销毁，侧滑返回时不会回到B。

    // 在B页面的跳转代码
uni.redirectTo({
  url: '/pages/A/A'
});

  2. 在A页面监听返回事件并拦截
    在A页面的onBackPress中判断是否在webview内，如果是则阻止默认返回行为，改为执行webview内部返回。

    export default {
  onBackPress(options) {
    if (options.from === 'popGesture') {
      // 侧滑返回时判断webview是否可以返回
      if (this.$refs.webview && this.$refs.webview.canBack()) {
        this.$refs.webview.back();
        return true; // 阻止默认返回
      }
    }
  }
}

  3. 在webview加载完成后禁用历史记录
    如果H5页面不需要历史记录，可以在H5页面中禁用返回行为，或通过evalJS注入脚本清除历史：

    // 在A页面的webview加载完成后
onLoad() {
  this.$refs.webview.evalJS('history.replaceState(null, "", window.location.href)');
}

  4. 使用uni.reLaunch彻底重置页面栈
    如果B页面完全不需要保留，可以从B跳转时使用：

    uni.reLaunch({
  url: '/pages/A/A'
});
回到顶部