uni自定义onBackPress事件

2020-06-22  本文已影响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
            }
}
上一篇下一篇

猜你喜欢

热点阅读