在 Android 和 Window 平台下,有时候我们需要监听返回按键的事件来进行相应的操作,也就是自定义返回按键事件。下面根据一个例子来讲解如何在 ionic 中自定义返回按键事件。

功能需求

首先看下要通过自定义返回按键事件来实现的需求(均在点击返回键操作之后):

  • 如果键盘打开,则隐藏键盘;
  • 如果显示 ionic 的 Loading 组件(在请求数据的时候),则隐藏 Loading 组件;
  • 如果当前页面是子页面,则返回上个页面;如果是根页面,则提示用户是否退出应用。

具体实现

首先说明下,本示例的 ionic 应用的结构是 tabs 结构。

  1. tabs.html 中的 ion-tabs 定义别名,如 mainTabs
<ion-tabs #mainTabs selectedIndex="1">
<ion-tab [root]="tab1Root" tabTitle="页面1"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="页面2"></ion-tab>
</ion-tabs>

ion-tabs 定义别名的目的是方便通过代码找到 ion-tabs 的实例。

  1. app.component.ts 中进行实现代码编写(实现细节在注释中):
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, Keyboard, IonicApp, NavController, Tabs, ToastController, Toast } from 'ionic-angular'; @Component({
templateUrl: 'app.html'
})
export class AppComponent {
@ViewChild(Nav) nav: Nav; // ion-nav 引用
backButtonPressed: boolean = false; // 用于判断返回键是否触发 constructor(public platform: Platform,
public ionicApp: IonicApp,
public toastCtrl: ToastController,
public keyboard: Keyboard) { // 等待平台加载完成之后注册返回按键事件
this.platform.ready().then(() => {
this.registerBackButtonAction(); // 注册返回按键事件
});
} /**
* 注册返回按键事件
*/
registerBackButtonAction() { // 使用 registerBackButtonAction 方法进行自定义事件处理程序
this.platform.registerBackButtonAction(() => { // 如果键盘开启则隐藏键盘。实现要点:使用 ionic-plugin-keyboard 插件进行键盘的控制
if (this.keyboard.isOpen()) {
this.keyboard.close();
return;
} // 隐藏加载动画。实现要点:通过 this.ionicApp._loadingPortal 获取到代表 Loading 的 OverlayPortal,然后获取当前被激活的 ViewController
const activePortal: any = this.ionicApp._loadingPortal.getActive();
if (activePortal) { // 如果有被激活的 ViewController 则将其隐藏。
activePortal.dismiss();
activePortal.onDidDismiss();
return;
} // 根据当前导航进行不同的处理( mainTabs 对象是在 TabsPage 定义的 ion-tabs )
// 通过 this.nav.getActive().instance.mainTabs 获取到别名为 mainTabs 的 ion-tabs
const mainTabs: Tabs = this.nav.getActive().instance.mainTabs;
if (mainTabs) { // 获取到当前被选中的 ion-tab
const mainNav: NavController = mainTabs.getSelected(); // 如果 ion-tab 能返回则返回上一个页面,不能就直接退出应用
mainNav.canGoBack() ? mainNav.pop() : this.showExit();
} else { // 如果 ion-nav 能返回则返回上一个页面,不能就直接退出应用
this.nav.canGoBack() ? this.nav.pop() : this.showExit();
}
return;
}, 1);
} /**
* 双击退出提示框
*/
showExit() {
if (this.backButtonPressed) { // 当触发标志为 true 时,即2秒内双击返回按键则退出APP
this.platform.exitApp();
} else {
const currentToast: Toast = this.toastCtrl.create({
message: '再按一次退出应用',
duration: 2000,
position: 'top'
});
currentToast.present().then(() => {
this.backButtonPressed = true; // 2秒内没有再次点击返回则将触发标志标记为false
const id: any = setTimeout(() => {
clearTimeout(id);
this.backButtonPressed = false;
}, 2000);
});
}
}
}

Ionic实现自定义返回按键事件的更多相关文章

  1. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  2. 移动端默认返回按键,使用h5+修改默认事件

    hbuilder的h5+提供开发webapp的诸多便利,很多手机自带back虚拟按键,如果不修改其默认事件,点一下app就退出了,所以我这里提供一种修改这个按键默认事件事件的代码. 首先你要用hbui ...

  3. Android按键事件传递流程(二)

    5    应用层如何从Framework层接收按键事件 由3.2和4.5.4节可知,当InputDispatcher通过服务端管道向socket文件描述符发送消息后,epoll机制监听到了I/O事件, ...

  4. Android Tv 中的按键事件 KeyEvent 分发处理流程

    这次打算来梳理一下 Android Tv 中的按键点击事件 KeyEvent 的分发处理流程.一谈到点击事件机制,网上资料已经非常齐全了,像什么分发.拦截.处理三大流程啊:或者 dispatchTou ...

  5. VBA中自定义类和事件的(伪)注册

    想了解一下VBA中自定义类和事件,以及注册事件处理程序的方法. 折腾了大半天,觉得这样的方式实在称不上“注册”,所以加一个“伪”字.纯粹是瞎试,原理也还没有摸透.先留着,有时间再接着摸. 做以下尝试: ...

  6. 【百度地图API】如何给自定义覆盖物添加事件

    原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...

  7. 转载 iOS拦截导航栏返回按钮事件的正确方式

    原文链接:http://www.jianshu.com/p/25fd027916fa 当我们使用了系统的导航栏时,默认点击返回按钮是 pop 回上一个界面.但是在有时候,我们需要在点击导航栏的返回按钮 ...

  8. input事件--->按键事件的基本实现

    本程序基于TINY4412开发板,程序已经验证过,完全正确: 那么,如何来写这样的一个驱动程序呢? 1.分配一个input_dev结构体 2.设置 3.注册 4.硬件相关的代码,比如中断,定时器,休眠 ...

  9. 安卓Tv开发(二)移动智能电视之焦点控制(按键事件)

    原文:http://blog.csdn.net/sk719887916/article/details/44781475 skay 前言:移动智能设备的发展,推动了安卓另一个领域,包括智能电视和智能家 ...

随机推荐

  1. CodeForces 76A Gift - 最小生成树

    The kingdom of Olympia consists of N cities and M bidirectional roads. Each road connects exactly tw ...

  2. UVa 10891 Game of Sum - 动态规划

    因为数的总和一定,所以用一个人得分越高,那么另一个人的得分越低. 用$dp[i][j]$表示从$[i, j]$开始游戏,先手能够取得的最高分. 转移通过枚举取的数的个数$k$来转移.因为你希望先手得分 ...

  3. github客户端上传代码

    在window下安装github客户端上传代码 第一步:创建Github新账户 第二步:新建仓库 第三步:安装Github shell程序,地址:http://windows.github.com/ ...

  4. Linq in GroupBy GroupJoin

    还是上一份的代码例子: public class Person { public int ID { get; set; } public string Name { get; set; } publi ...

  5. 【第十一章】 springboot + mongodb(简单查询)

    1.mongodb在mac上的安装 下载mongodb,https://www.mongodb.org/ 解压缩到一个指定文件夹,如:/Users/enniu1/Desktop/zjg/mongodb ...

  6. Redis集群学习笔记

    Redis集群学习笔记 前言 最近有个需求,就是将一个Redis集群中数据转移到某个单机Redis上. 迁移Redis数据的话,如果是单机Redis,有两种方式: a. 执行redis-cli shu ...

  7. 华中农业大学第四届程序设计大赛网络同步赛 G.Array C 线段树或者优先队列

    Problem G: Array C Time Limit: 1 Sec  Memory Limit: 128 MB Description Giving two integers  and  and ...

  8. Jmeter工具做性能测试 常见的错误汇总

    在Win机器上用Jmeter做性能测试,汇总下我自身遇到的错误和解决方案 java.net.BindException: Address already in use: JVM_Bind 原因分析:压 ...

  9. [设计模式]适配器模式Adapter

    将一个类的接口转换成客户希望的另外一个接口. A d a p t e r模式使得原本 由于接口不兼容而不能一起工作的那些类可以一起工作.

  10. Java 常用对象-String类

    2017-11-02 20:02:06 String:代表字符串.Java 程序中的所有字符串字面值(如 "abc" )都作为此类的实例实现. 字符串是常量:它们的值在创建之后不能 ...