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

写一篇简单的,有这样一种业务场景:当使用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;
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,277评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,204评论 4 61
  • 关于雨天的故事有很多,但如果要说记忆最深刻的,莫过于此。 将寒未寒的时候,在午后下了一场大雨,和弟弟从学校赶回家,...
    舒陌染阅读 2,750评论 1 1
  • 01 邮箱被盗,因之前注册时的手机号已经变更,没有找回。苦于新拍的几组照片无处投稿,便在微博上发私信给从相互关注到...
    家龙同学阅读 4,969评论 2 8
  • 《春娇救志明》是这个系列的最后一集,故事讲的还是两人之间的感情,但是此时的春娇已经40岁,面临“中女危机”,而36...
    自律是自由阅读 4,336评论 0 48