uni-app onBackPress函数问题

uni-app onBackPress函数问题

项目属性 值
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 2.7.14
手机系统 Android
手机系统版本号 Android 10
手机厂商 小米
手机机型 米9
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

onBackPress() {  
    console.log(this.isConfirm);  
    if(this.isConfirm == false){  
        uni.showModal({  
            content: '数据尚未保存,你确定要返回吗？',  
            success: function (res) {  
                if (res.confirm) {  
                    this.isConfirm = true  
                    console.log(`点击确认按钮`);  
                    console.log(this.isConfirm);  
                    uni.navigateBack({  
                         delta:1  
                        })  
                }   
            }  
        })  
        return true  
    }else{  
        return false  
    }  
},
```
`uni.navigateBack`会再走一次`onBackPress`钩子，但是上次修改的`isConfirm`不应该自动发生变化  

### 预期结果：
`uni.navigateBack`会再走一次`onBackPress`钩子，但是上次修改的`isConfirm`应该为我修改后的true，从而实现返回

### 实际结果：
`isConfirm`异常

### bug描述：
复写返回逻辑，点击返回的时候弹出确认弹窗

data() {  
    return {  
       isConfirm:false, //处理返回逻辑  
  }  
}  
methods:{  
     onBackPress() {  
            console.log(this.isConfirm);  
            if(this.isConfirm == false){  
                uni.showModal({  
                    content: '数据尚未保存,你确定要返回吗？',  
                    success: function (res) {  
                        if (res.confirm) {  
                            this.isConfirm = true  
                            console.log(`点击确认按钮`);  
                            console.log(this.isConfirm);  
                            uni.navigateBack({  
                                 delta:1  
                                })  
                        }   
                    }  
                })  
                return true  
            }else{  
                return false  
            }  
        }  
}
```
这样写了在执行`uni.navigateBack`的时候`this.isConfirm = true`会自动变成`false`，问题是我根本没写过这个`this.isConfirm = true`的逻辑  
```

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20200621/d26c411b61bcbf3a8dd73891505c6a67.png)

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20200621/0063110b00cb3b29e18eafea1f68d38d.png)

更多关于uni-app onBackPress函数问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

虽然没看明白你说的问题，但是看到你 showModal 回调方法中 this 的指向不对。

更多关于uni-app onBackPress函数问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一语中的，忘了用箭头函数了，已经解决，谢谢

showModal 回调方法中 不能用this 在model外定义一个 let that=this 然后在回调里用that.xxx

忘了用箭头函数了，已经解决啦，谢谢

这是典型的this指向问题。在uni.showModal的success回调中，this指向已经改变，不再是Vue组件实例。导致this.isConfirm = true实际是在修改错误的上下文。

解决方案是使用箭头函数或提前保存this引用：

onBackPress() {
    const _this = this
    console.log(_this.isConfirm)
    if(_this.isConfirm == false){
        uni.showModal({
            content: '数据尚未保存,你确定要返回吗？',
            success: function(res) {
                if(res.confirm) {
                    _this.isConfirm = true
                    console.log(`点击确认按钮`)
                    console.log(_this.isConfirm)
                    uni.navigateBack({
                        delta:1
                    })
                }
            }
        })
        return true
    }else{
        return false
    }
}

或者使用箭头函数：

onBackPress() {
    if(this.isConfirm == false){
        uni.showModal({
            content: '数据尚未保存,你确定要返回吗？',
            success: (res) => {
                if(res.confirm) {
                    this.isConfirm = true
                    uni.navigateBack({
                        delta:1
                    })
                }
            }
        })
        return true
    }
    return false
}
回到顶部