uni-app IOS环境下 webview原生滑动返回uni-app内部页面出现弹窗 已解决

uni-app IOS环境下 webview原生滑动返回uni-app内部页面出现弹窗 已解决

产品分类

  • uniapp/App

PC开发环境操作系统

  • Mac

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

  • 11.2.3

HBuilderX类型

  • 正式

HBuilderX版本号

  • 3.1.6

手机系统

  • iOS

手机系统版本号

  • IOS 14

手机厂商

  • 苹果

手机机型

  • 全部iPhone机型

页面类型

  • vue

打包方式

  • 云端

项目创建方式

  • HBuilderX

App下载地址或H5网址

操作步骤

  • 进入app-我的-关于我们-点击底下蓝色字“服务政策”或隐私服务进入webview页面
  • 屏幕滑动返回上一页

预期结果

  • 无弹窗 直接返回

实际结果

  • 有不知名弹窗

bug描述

  • uniapp IOS环境下 webview原生滑动返回uniapp内部页面出现弹窗
  • iPhone全部机型都会
  • 安卓并不会


更多关于uni-app IOS环境下 webview原生滑动返回uni-app内部页面出现弹窗 已解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

8 回复

请检查一下代码中是否监听了popGesture

更多关于uni-app IOS环境下 webview原生滑动返回uni-app内部页面出现弹窗 已解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有监听 是需要在manifest.json的"app-plus"节点中配置 “popGesture”:“none” ???

回复 m***@163.com: 不是禁用App侧滑，可能是你的H5页面中有触发侧滑的监听。

回复 2104_DLS: 没有的哦

回复 m***@163.com: 有没有demo项目，发一下

你使用hello uni-app示例项目跑一下看看能不能出现

由于嵌入的H5页面监听元素导致和popGesture冲突

这是一个典型的iOS平台webview手势返回与uni-app页面栈冲突问题。iOS的webview支持边缘滑动返回手势，当用户在webview页面执行该操作时，系统会尝试返回上一个webview历史记录，但此时uni-app的页面栈仍保留着前一个vue页面，导致冲突并触发异常弹窗。

解决方案是通过配置pages.json禁用webview的滑动返回功能：

{
  "path": "pages/webview/webview",
  "style": {
    "app-plus": {
      "bounce": "none",
      "titleNView": false,
      "scrollIndicator": "none",
      "popGesture": "none"
    }
  }
}

关键配置项popGesture: "none"用于禁用iOS的滑动返回手势。同时建议关闭bounce效果避免其他滚动冲突。

对于已存在的webview页面，可在onLoad生命周期中通过条件编译单独处理iOS平台：

onLoad() {
  // #ifdef APP-PLUS
  if (uni.getSystemInfoSync().platform === 'ios') {
    const webview = this.$mp.page.$getAppWebview()
    webview.setStyle({
      popGesture: 'none'
    })
  }
  // #endif
}
回到顶部