uni-app iOS平台 subNvue子页面触发滑动返回问题

uni-app iOS平台 subNvue子页面触发滑动返回问题

开发环境 版本号 项目创建方式
Windows Windows 10 教育版21H1 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：Alpha

HBuilderX版本号：4.14

手机系统：iOS

手机系统版本号：iOS 17

手机厂商：苹果

手机机型：iPhone 14 Plus

页面类型：vue

vue版本：vue2

打包方式：云端

项目创建方式：HBuilderX

示例代码：

```json
{
    "path": "pages/article/articlevue",
    "style": {
        "navigationBarTitleText": "",
        "enablePullDownRefresh": false,
        "disableSwipeBack": true,
        "app-plus": {
            "titleNView": false,
            "bounce": "none",
            "subNVues": [{
                "id": "pingList",
                "type": "popup",
                "path": "pages/article/subNvue/pingList",
                "style": {
                    "top": "100px",
                    "bottom": "0",
                    "position": "dock",
                    "dock": "bottom",
                    "zindex": 10,
                    "background": "rgba(0,0,0,0)"
                }
            }]
        }
    }
}

操作步骤： 进入vue页面后点击条回复，打开subNvue页面，然后滑动关闭subNvue，会留下遮罩层，点击遮罩层可关闭遮罩层，然后再点击条回复，只能打开遮罩层，无法再成功打开subNvue子窗体。

预期结果：

  1. 侧滑不能关闭subNvue子窗体
  2. 或者直接连遮罩层一起关闭，同时再次打开时可以成功打开

实际结果： 会留下遮罩层，点击遮罩层可关闭遮罩层，然后再点击条回复，只能打开遮罩层，无法再成功打开subNvue子窗体

bug描述： iOS设备的vue页面打开subNvue子页面后，侧滑会关闭subNvue，并且留下遮罩层，同时再调用javascript this.pingListSubNVue.show('slide-in-bottom', 600) 只能打开遮罩层，无法再打开subNvue子页面了

录屏示例


更多关于uni-app iOS平台 subNvue子页面触发滑动返回问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

iOS禁用侧滑返回

更多关于uni-app iOS平台 subNvue子页面触发滑动返回问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是"disableSwipeBack": true,这个吗，。，还是"popGesture": “none”,还是啥，，这个试过了，不行

回复 废小小小柴: // 强制不可侧滑 plus.webview.currentWebview().setStyle({ ‘popGesture’: ‘none’ });

回复 研究生补鸭蛋: 这个是在vue页面设置（试过了不行），还是在subNvue子窗体设置？，我看了文档，popGesture不支持nvue页面啊

回复 废小小小柴: subNvue子窗体created时候设置就行

回复 研究生补鸭蛋: 稍等，我试一下

回复 研究生补鸭蛋: 可以了，，谢谢谢谢，，，我当时在vue页面试了这个方法了，看文档说不支持nvue，我就没在nvue页面试，当时多试一下就ok了----.nvue 页面仅支持 titleNView、pullToRefresh、scrollIndicator 配置，其它配置项暂不支持（文档里是这么写的）

回复 废小小小柴: 嗯呢

在 uni-app 中，subNvue 是用于在原生页面中嵌入子窗口的技术。在 iOS 平台上，subNvue 子页面可能会触发系统的滑动返回手势，导致用户体验不佳。以下是一些解决该问题的方法：

1. 禁用系统滑动返回手势

你可以通过修改 pages.json 配置文件，禁用特定页面的系统滑动返回手势。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "disableSwipeBack": true // 禁用滑动返回
      }
    }
  ]
}

2. 监听滑动事件并处理

在 subNvue 子页面中，你可以监听滑动事件，并在适当的时候阻止默认行为。

// 在 subNvue 子页面的 script 中
export default {
  onLoad() {
    // 监听 touch 事件
    uni.onTouchStart((e) => {
      // 处理滑动逻辑
      // 例如，判断滑动方向并决定是否阻止默认行为
    });
  }
}

3. 使用 nvue 页面自定义返回逻辑

如果你使用的是 nvue 页面，可以通过自定义导航栏和返回按钮来实现更灵活的返回逻辑。

// 在 nvue 页面的 script 中
export default {
  methods: {
    back() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}

4. 使用 uni-app 的 onBackPress 生命周期

你可以在 subNvue 子页面中使用 onBackPress 生命周期来拦截返回事件。

export default {
  onBackPress(options) {
    // 处理返回逻辑
    // 返回 true 表示拦截返回事件
    return true;
  }
}

5. 使用 subNvue 的 style 属性

通过设置 subNvue 的 style 属性，可以调整子页面的样式和布局，避免与系统滑动返回手势冲突。

{
  "subNVue": [
    {
      "id": "subNvueId",
      "path": "pages/subNvuePage",
      "style": {
        "position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "backgroundColor": "#FFFFFF"
      }
    }
  ]
}
回到顶部