【技巧】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;
  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GreenLeaves

iframe 解析

简介:iframe在日常的开发中经常用到,本随笔在参考http://blog.csdn.net/cuew1987/article/details/1126515...

26310
来自专栏用户2442861的专栏

Qt:QListWidget的item上实现右键菜单(空白的地方)

http://blog.csdn.net/lpmygod/article/details/38924427

8961
来自专栏Golang语言社区

Golang 解析base64网络传输如何解析

今天在给服务器做压力测试的流程的时候,遇到了个Golang语言的解析问题;涉及到的主要是解析Base64编码问题,同时也看了底层的源码以下是自己实现的解析: ...

4296
来自专栏pangguoming

Excel 2013中单元格添加下拉列表的方法

使用Excel录入数据的时候我们通常使用下拉列表来限定输入的数据,这样录入数据就很少发生错误了。Excel 2013较以前的版本发生了很大的变化,那么在Exce...

3308
来自专栏守望轩

Visual Studio 2008 每日提示(二)

#011、 全屏模式 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/09/did-you-know-...

2998
来自专栏Java帮帮-微信公众号-技术文章全总结

01.HTML教程/简介/基础

01.HTML教程/简介/基础 HTML 教程- (HTML5 标准) 超文本标记语言(英语:HyperText Markup Language,简称:HTML...

6008
来自专栏编程直播室

Canvas 显示图片

1974
来自专栏守望轩

Visual Studio 2008 每日提示(三)

#021、 调整字符、词或行的顺序 原文地址:http://blogs.msdn.com/saraford/archive/2007/08/23/did-yo...

2743
来自专栏JackeyGao的博客

定义横向和纵向不同的print样式

最近优化了 中文诗歌 的打印样式, 由于 Chrome 在打印的时候可以选择横向或者纵向的布局, 所以想同时支持两种布局。

2631
来自专栏跟着阿笨一起玩NET

WinForm自定义验证控件

本文转载:http://blog.csdn.net/ziyouli/article/details/7583824

2171

扫码关注云+社区

领取腾讯云代金券