前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【技巧】ionic3的页面导航后退事件拦截

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

作者头像
IT晴天
发布2018-08-20 10:21:19
9450
发布2018-08-20 10:21:19
举报
文章被收录于专栏:ionic3+ionic3+

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

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

头顶添加引用:

代码语言:javascript
复制
import { IonicPage, NavController, NavParams, Navbar } from 'ionic-angular';

类里添加注解变量:

代码语言:javascript
复制
 @ViewChild(Navbar) navbar: Navbar;

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

代码语言:javascript
复制
  ionViewDidLoad() {
    this.navbar.backButtonClick = (e)=>{
      console.log(e);
    };
  }

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

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

2、利用ionViewCanLeave

给定一个标志变量:

代码语言:javascript
复制
canLeave:boolean = false;

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

代码语言:javascript
复制
ionViewCanLeave() {
    return this.canLeave;
  }
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.08.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、重写导航栏的后退按钮点击方法,具体操作为:
  • 2、利用ionViewCanLeave
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档