美文网首页
uni自定义onBackPress事件

uni自定义onBackPress事件

作者: 扶不起的蝌蚪 | 来源:发表于2020-06-22 14:11 被阅读0次

    onBackPress函数returntrue以外的值都会执行默认的返回行为,只有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
               }
    }
    

    值得一提的是这个函数不能使用async await,否则会导致弹出moadl后就没有后面的返回动作

    //错误示例
    data() {
                return {
                    isConfirm:false, //处理返回逻辑
                };
            },
    methods:{
        async onBackPress() {
                if(this.isConfirm == false)
                {
                    let [,res]  = await uni.showModal({ content: '数据尚未保存,你确定要返回吗?})
                     if (res.confirm)
                     {
                            this.isConfirm = true
                            uni.navigateBack()
                            return true
                     }
                     else             
                        return false
                }
    }
    

    相关文章

      网友评论

          本文标题:uni自定义onBackPress事件

          本文链接:https://www.haomeiwen.com/subject/ufmxfktx.html