uni-app plus.screen.lockOrientation屏幕旋转导致页面栈出现问题,使用uni.navigateBack({ delta: 1, });返回了2级

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app plus.screen.lockOrientation屏幕旋转导致页面栈出现问题,使用uni.navigateBack({ delta: 1, });返回了2级

uni.navigateBack() 页面返回错误,不符合我的预期,页面多返回了一层,且页面栈打印是正常的。最终效果为,最后一个页面栈为我预期的页面路径,倒数二个为返回显示的页面的路径。经过测试,发现是因为使用了plus.screen.lockOrientation 切换横竖屏导致的。如果非得需要使用plus.screen.lockOrientation这种方式,这个页面栈问题怎么解决呢?望大佬指点一下。谢谢!

image

image


1 回复

在处理uni-app中屏幕旋转导致的页面栈问题时,特别是当你发现uni.navigateBack({ delta: 1 });实际上返回了2级页面,这通常与页面栈管理在屏幕旋转时的状态不一致有关。为了解决这个问题,我们可以考虑在屏幕锁定或解锁时手动管理页面栈的状态。

以下是一个可能的解决方案,通过监听屏幕方向的变化,并在变化时记录或调整页面栈的状态。这里将展示如何使用plus.screen.lockOrientationplus.screen.unlockOrientation来锁定和解锁屏幕方向,同时利用全局变量来跟踪页面栈的变化。

首先,定义一个全局变量来跟踪当前的页面栈深度:

// 在app.js或某个全局文件中定义
let pageStackDepth = 0;

然后,在你的页面逻辑中,每当执行uni.navigateTo时增加页面栈深度,执行uni.navigateBack时减少深度,并同时处理屏幕旋转的逻辑:

// 页面跳转时增加页面栈深度
uni.navigateTo({
    url: '/pages/somePage/somePage',
    success: function() {
        pageStackDepth++;
    }
});

// 页面返回时减少页面栈深度,并处理返回逻辑
function navigateBack() {
    pageStackDepth--;
    // 根据实际需要的返回层级调整delta值,这里假设正常情况下返回1级
    let delta = 1;
    // 如果检测到屏幕旋转导致的异常,可以调整delta值
    // 例如,如果确定因为屏幕旋转导致多返回了一级,可以临时设置delta为0或重新计算
    // 这里简化处理,直接根据pageStackDepth计算delta
    if (pageStackDepth < 0) {
        // 防止负值导致错误
        delta = pageStackDepth + 1; // 实际上这里应该是修正逻辑,确保不会进入此分支,仅为示例
        pageStackDepth = 0;
    }
    uni.navigateBack({ delta: delta });
}

// 监听屏幕方向变化(这里仅为示例,实际可能需要更复杂的逻辑处理)
plus.screen.addEventListener('orientationchange', function(e) {
    console.log('Screen orientation changed to: ' + e.orientation);
    // 根据屏幕方向变化调整页面栈逻辑(这里可能需要具体业务逻辑支持)
    // 例如,如果检测到旋转,可以临时锁定屏幕方向并修正页面栈
    plus.screen.lockOrientation('portrait'); // 锁定竖屏
    // 可以在这里加入额外的逻辑来检查和修正pageStackDepth
});

请注意,上述代码是一个简化的示例,用于说明如何通过监听屏幕方向变化并手动管理页面栈状态来解决可能的问题。在实际应用中,你可能需要根据具体的业务逻辑和需求来调整和完善这些代码。

回到顶部