关于 uniapp 重写 onBackPress 方法不生效的问题解决


avatar
博主大大 2021-09-25 6.75k

需求背景

在某个子页面点击左上角返回按钮直接返回到首页。

说明

当用户进行以下操作时,会触发该函数:

1、Android 实体返回键 (from = backbutton)
2、顶部导航栏左边的返回按钮 (from = backbutton)
3、返回 API,即 uni.navigateBack() (from = navigateBack)

注意事项

1、只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行处理此时的业务逻辑。
2、当不阻止页面返回却直接调用页面路由相关接口(如:uni.switchTab)时,可能会导致页面显示异常,可以通过延迟调用路由相关接口解决。
3、不返回或返回其它值,均会执行默认的返回行为。
4、H5 平台,顶部导航栏返回按钮支持 onBackPress(),浏览器默认返回按键及Android手机实体返回键不支持 onBackPress()
5、暂不支持直接在自定义组件中配置该函数,目前只能是在页面中来处理。

错误实现

onBackPress(e) {
    if (e.from == 'backbutton') {
        uni.navigateBack({
            delta: 100
        })
    }
    return true
},

由于 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。
这就是导致重写 onBackPress 方法不生效的罪魁祸首,然而也没有任何错误提示。

正确实现

onBackPress(options) {
    if (options.from === 'navigateBack') {
        return false
    }
    uni.navigateBack({
        delta: 100
    })
    return true
}

需要根据 onBackPress 的回调对象中的 from 值来做处理,当来源是 navigateBack 时,返回 false。

参考资料

https://ask.dcloud.net.cn/article/id-35120__page-8

相关阅读