关于uniapp嵌入iframe的问题

Question

uniapp 嵌入iframe页面，打包成安卓包，侧滑iframe页面无法返回上一页

Answer 1

引自免费微信小程序：皆我百晓生

在 UniApp 中，当您遇到嵌入的 iframe 页面在 Android 打包后无法通过侧滑返回上一页的问题时，这可能是由于 Android 的硬件返回键和默认的侧滑手势冲突导致的。为了解决这个问题，您可以尝试以下步骤：

1. 首先，在您的项目根目录下的 project.config.json 文件中，找到并添加以下配置：

{
  "android": {
    "disableHardwareBack": false,
    "disableSwipeBack": true
  }
}

这样可以禁用 Android 的默认侧滑返回功能，同时保留物理返回键的功能。

1. 如果您想要自定义侧滑返回的行为，可以在全局的 main.js 或 app.vue 文件中监听 uni.onSwipeBack 事件，并实现您自己的逻辑。例如，当用户从左侧向右滑动时，您可以调用 uni.navigateBack() 方法返回上一个页面。以下是示例代码：

// 在 main.js 或 app.vue 文件中
import { uni } from '@dcloudio/uni-app'

uni.onSwipeBack(e => {
  if (e.direction === 'right') {
    uni.navigateBack({
      delta: 1 // 表示返回上一个页面
    })
  }
})

1. 确保在 iframe 中的页面也有正确的导航管理。如果您使用的是 Vue，确保在每个组件的生命周期钩子（如 beforeRouteLeave）中处理离开页面的逻辑，以便正确地更新路由堆栈。

2. 如果您仍然遇到问题，检查一下 iframe 内部的页面是否有阻止默认滚动行为的 CSS 样式，比如设置了 overflow: hidden。如果有，可能会影响侧滑返回的效果。

按照上述步骤操作后，应该可以解决在 Android 包中的 iframe 页面侧滑返回上一页的问题。注意，这些更改会影响到整个应用的侧滑返回行为，如果你只希望对特定页面生效，你可能需要在页面内的生命周期钩子中动态启用或禁用这些设置。