uni-app自定义onBackPress事件

最新推荐文章于 2026-03-30 09:54:48 发布

原创最新推荐文章于 2026-03-30 09:54:48 发布 · 1.8k 阅读 ·

大模型引用 1 次

本内容遵循CC 4.0 BY-SA版权协议

wieyi

关注

标签

#web app

分类前端开发

这篇博客介绍了在uni-app中如何使用onBackPress方法处理返回事件。作者强调在返回按钮被按下时，如果希望阻止默认的返回行为，必须在函数中返回true。通过示例代码展示了如何结合uni.showModal实现确认退出的逻辑，并通过isConfirm变量防止无限循环的modal弹出。此外，还提醒开发者注意在navigateBack后由于事件触发的递归问题，需要添加额外的判断条件。

onBackPress函数return非true以外的值都会执行默认的返回行为，只有return true才不会执行返回事件，所以在执行自定义事件时一定要返回true

data() {
            return {
                isConfirm:false, //处理返回逻辑
            };
        },
methods:{
    onBackPress() {
            if(this.isConfirm == false)
            {
                uni.showModal({
                    content: '数据尚未保存,你确定要返回吗？',
                    success:  res => { // 一定要保证this的指向问题，否则会导致无限的弹出modal，可以考虑用that保存this指针或是使用箭头函数
                        if (res.confirm) 
                        {
                            this.isConfirm = true
                            uni.navigateBack() //navigateBack会再次执行onBackPress事件，所以在进入函数的时候我们加了isConfirm来判断是否执行自定义的事件
                        } 
                    }
                })
                return true
            }
            else
                return false
           }
}