美文网首页我的ionicionic3+
【技巧】ionic3的页面导航后退事件拦截

【技巧】ionic3的页面导航后退事件拦截

作者: IT晴天 | 来源:发表于2017-08-29 00:05 被阅读285次

写一篇简单的,有这样一种业务场景:当使用push后,页面导航栏会自动添加后退按钮,当点击后退按钮后,拦截事件(如付费进来了,没有完成后续操作就后退退出,良好的用户体验是必须给出提示,防止误操作)。
基于此,起码有两种方式:

1、重写导航栏的后退按钮点击方法,具体操作为:

头顶添加引用:

import { IonicPage, NavController, NavParams, Navbar } from 'ionic-angular';

类里添加注解变量:

 @ViewChild(Navbar) navbar: Navbar;

最后在页面生命周期方法ionViewDidLoad添加逻辑操作(写在此方法中是保障页面已经加载完成,保证此时this.navbar为有值,不然赋值方法会报错):

  ionViewDidLoad() {
    this.navbar.backButtonClick = (e)=>{
      console.log(e);
    };
  }

执行上述方法后,事件被拦截,页面不会后退,需要自己手动写navCtrl.pop()等类似导航方法。

此方法的弊端是:只能拦截点击事件,如果是一些非法后退操作呢?如ios端的左滑后退,android的物理键后退,或者某个操作手动调用navCtrl.pop()的方法,这样就会失效。

2、利用ionViewCanLeave

给定一个标志变量:

canLeave:boolean = false;

然后在逻辑操作中控制这个标志即可,最后在方法里面判断:

ionViewCanLeave() {
    return this.canLeave;
  }

相关文章

网友评论

  • 颓废牛虻:大佬,不能后退要前进怎么办
    IT晴天:@颓废牛虻 ionCanLeave前进时设置返回标志为true
    IT晴天:@颓废牛虻 不是说给定一个标志位么?能离开就设置true,否则false

本文标题:【技巧】ionic3的页面导航后退事件拦截

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