ionic3监听返回事件 实现双击按钮退出app

发布于 6 年前 作者 vueper 1930 次浏览 来自 分享

下面给大家分享一个 ionic3监听返回事件 实现双击按钮退出app

ionic3监听类代码

import {Injectable} from '@angular/core';
import {App, IonicApp, Keyboard, NavController, Platform} from "ionic-angular";
import {AppService} from "../util/app.service";
 
 
/*
  Generated class for the HardwareBackButtonProvider provider.
  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class HardwareBackButtonProvider {
  backButtonPressed: boolean = false;  //用于判断返回键是否触发
  private nav: NavController;
 
  constructor(public platform: Platform, public app: App, public appService: AppService, private keyboard: Keyboard) {
 
  }
 
  /**
   * 注册全局返回事件
   */
  registerBackButtonAction(ionicApp: IonicApp) {
    this.nav = this.app.getActiveNav();
    this.platform.registerBackButtonAction(() => {
      if (this.keyboard.isOpen()) {//如果键盘开启则隐藏键盘
        this.keyboard.close();
        return;
      }
      //如果想点击返回按钮隐藏toast或loading或Overlay就把下面加上
      // this.ionicApp._toastPortal.getActive() || this.ionicApp._loadingPortal.getActive() || this.ionicApp._overlayPortal.getActive()
      let activePortal = ionicApp._modalPortal.getActive() || ionicApp._loadingPortal.getActive() || ionicApp._overlayPortal.getActive();
      if (activePortal) {
        activePortal.dismiss().catch(() => {
        });
        activePortal.onDidDismiss(() => {
        });
        return;
      }
      return this.nav.canGoBack() ? this.nav.pop() : this.showExit()
    }, 1);
  }
 
 
  /**
   * 双击退出提示框
   */
  showExit() {
    if (this.backButtonPressed) { //当触发标志为true时,即2秒内双击返回按键则退出APP
      this.platform.exitApp();
    } else {
      this.appService.toast("再按一次返回退出自驾游应用")
      this.backButtonPressed = true;
      setTimeout(() => this.backButtonPressed = false, 2000);//2秒内没有再次点击返回则将触发标志标记为false
    }
  }
}

监听类注册到app.module.ts


import {HardwareBackButtonProvider} from "../providers/native/back-button.provider";
export const PROVIDERS = [
  HardwareBackButtonProvider
]

这样子就可以实现ionic3监听返回事件 实现双击按钮退出app, 在APP首页提示点击两次返回按钮退出APP的提示,并且双击返回按钮退出APP

1 回复
回到顶部