uni-app原生为主内嵌小程序开发方式禁止左滑部分手机不生效;uni-app路由会直接退出原生页面。

uni-app原生为主内嵌小程序开发方式禁止左滑部分手机不生效;uni-app路由会直接退出原生页面。

开发环境 版本号 项目创建方式
uni-app Android@3.98;IOS@3.99 未知

产品分类

uni小程序SDK

手机系统

全部

页面类型

vue

App下载地址或H5网址

起亚kia

测试过的手机

  1. IOS:
    • 软件版本17.1.2: 不兼容。I0S最新系统不兼容(本身系统就要较多兼容bug)。
    • 软件版本16.1.1: 兼容。
    • 软件版本 15.5: 兼容。
  2. 安卓:
    • vivox90手机设置为手势全面屏模式会不兼容

操作步骤

原生页面A -> 小程序页面B -> 小程序页面C, 小程序页面C左滑返回直接退到了原生页面A

预期结果

小程序页面C左滑禁止掉,点击上方返回按后逐级返回

实际结果

小程序页面C左滑返回直接退到了原生页面A

bug描述

"app-plus": {   
    "popGesture": "none"  
}

在部分手机不生效;譬如:在小程序中:原生页面A->小程序页面B->小程序页面C, 左滑会直接退出到原生页面A。 不是逐级C->B->A返回的

uniapp左滑bug.mp4_.zip


更多关于uni-app原生为主内嵌小程序开发方式禁止左滑部分手机不生效;uni-app路由会直接退出原生页面。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app原生为主内嵌小程序开发方式禁止左滑部分手机不生效;uni-app路由会直接退出原生页面。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 Uni-app 进行原生开发并内嵌小程序时,可能会遇到以下两个问题:

  1. 禁止左滑在某些手机上不生效

    • 在一些 Android 和 iOS 设备上,默认的滑动返回手势可能会导致页面左滑返回的行为无法被完全禁止。
    • 解决方案
      • pages.json 中,可以通过设置 disableSwipeBack: true 来禁用页面的滑动返回功能。
      • 如果仍然不生效,可以考虑在页面的 onLoadonShow 生命周期中,通过 uni.setNavigationBarTitle 或其他 API 动态调整导航栏的配置,进一步控制页面的行为。
    {
      "pages": [
        {
          "path": "pages/index/index",
          "style": {
            "disableSwipeBack": true
          }
        }
      ]
    }
    
  2. Uni-app 路由会直接退出原生页面

    • 当你在原生页面中内嵌小程序,并使用 Uni-app 的路由进行页面跳转时,可能会导致原生页面被退出,直接返回到小程序的页面栈中。
    • 解决方案
      • 确保在跳转时使用 uni.navigateTo 而不是 uni.redirectTouni.reLaunch,这样可以保持原生页面的栈不被销毁。
      • 如果需要返回到原生页面,可以使用 uni.navigateBack 返回到上一个页面。
      • 如果需要在多个页面之间保持原生页面的状态,可以考虑使用全局状态管理(如 Vuex)来保存页面的状态。
    // 使用 navigateTo 进行页面跳转
    uni.navigateTo({
      url: '/pages/otherPage/otherPage'
    });
    
    // 返回到上一个页面
    uni.navigateBack({
      delta: 1
    });
回到顶部