uniapp页面自带导航条自定义返回上一页的方法

发布于 2023-12-21  358 次阅读


内容纲要

uniapp一键添加的页面默认会启用顶部的导航条,默认包括一个返回按钮和窗口标题。

存在一个问题,当我们直接访问一个非首页的页面时,然后点击返回按钮,会直接跳转到首页,且不能直接返回当前页面。

在配置文件里面不可以直接更改返回按钮跳转的地址。

翻了下文档,发现有一个事件:

onBackPress

自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。

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

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

因此通过在页面注册这个事件:

export default {
        uni.redirectTo({
                url: '/pages/edu/edu'
            });
            return false;
    }

但是在使用的时候发现这个方法有时候不起作用,尤其是封装微信小程序的时候。

尝试通过onUnload()方法来解决:

解释:监听页面卸载

示例:

onUnload() {
            uni.redirectTo({
                url: '/pages/edu/edu'
            });
            return false;
        },

完美解决!