背景:原生页面如果存在弹窗,在点击返回键时,会先隐藏弹窗,如果没有显示弹窗,点击返回键时会返回到上一页,前端开发也经常面临这个问题。
一、问题解决思路
1.原生点击返回(或侧滑返回),传递事件给前端。
- 前端页面监听原生物理返回键(或侧滑返回)。
二、最终方案
- 原生传递事件,需要原生支持。也存在一定复杂度。
- 前端监听原本使用popstate事件,但是在IOS全面屏下 侧滑返回效果不佳
- 换个思路,我们的目的是为了在页面离开时,检查当前页面是否有弹窗,如果有弹窗,则关闭弹窗,如果没有弹窗,则关闭页面。于是可以选择使用路由守卫方法=> beforeRouteLeave
三、详细操作
注:beforeRouteLeave具体可以参见 Vue路由
beforeRouteLeave(to, from, next) {
// this.dateShow 控制弹窗的显示
if (this.dateShow) {
this.dateShow = false
next(false)
} else {
next()
}
}