ionic3 物理返回键关闭model问题

 
1. 接下来直接上代码


import {Component, ViewChild} from '@angular/core';
import {Platform, Nav, ToastController, Keyboard, IonicApp} from 'ionic-angular';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
import {TabsPage} from '../pages/tabs/tabs';
import {Storage} from '@ionic/storage';
import {GlobalData} from "../providers/GlobalData";
import {SqliteService} from '../providers/sqlite-service';

declare var window;

/**
 * app 根组件
 */
@Component({
    templateUrl: 'app.html'
})
export class MyApp {

    rootPage: any = TabsPage;// 根页面
    backButtonPressed: boolean = false;// 返回键是否已触发

    // 导航
    @ViewChild(Nav) nav: Nav;

    constructor(private platform: Platform,
                private statusBar: StatusBar,
                private splashScreen: SplashScreen,
                private toast: ToastController,
                public keyboard: Keyboard,
                public ionicApp: IonicApp,
                public storage: Storage,
                private globalData: GlobalData,
                private sqliteService: SqliteService) {
        this.platform = platform;
        this.toast = toast;
        this.rootPage = TabsPage;
        // 初始化
        this.init();
    }

    /**
     * 初始化
     */
    init() {
        let that = this;
        let dbIsInit = false;

        // 浏览器环境先初始化数据库
        if (!window.cordova) {
            this.sqliteService.initDb();
            dbIsInit = true;
        }

        // 启动完成
        this.platform.ready().then(() => {
            // 获取token并放入全局变量
            this.storage.get('token').then(function (token) {
                that.globalData.token = token;
            })
            if (!dbIsInit) {
                this.sqliteService.initDb();
            }

            // 隐藏启动页
            this.splashScreen.hide();

            // 设置状态栏
            this.statusBar.styleDefault();
            this.statusBar.styleLightContent();

            // 注册返回按键事件
            this.platform.registerBackButtonAction((): any => {
                //按下返回键时,先关闭键盘
                if (this.keyboard.isOpen()) {
                    //按下返回键时,先关闭键盘
                    this.keyboard.close();
                    return;
                };
                let activePortal = this.ionicApp._modalPortal.getActive() ||this.ionicApp._overlayPortal.getActive();
                let loadingPortal = this.ionicApp._loadingPortal.getActive();
                if (activePortal) {
                    //其他的关闭
                    activePortal.dismiss().catch(() => {
                    });
                    activePortal.onDidDismiss(() => {
                    });
                    return;
                }
                if (loadingPortal) {
                    //loading的话,返回键无效
                    return;
                }

                // 获取已激活页面
                let activeVC = this.nav.getActive();
                let page = activeVC.instance;
                if (!(page instanceof TabsPage)) {
                    if (!this.nav.canGoBack()) {
                        // 当前页面为tabs,退出APP
                        return this.showExit();
                    }
                    // 当前页面为tabs的子页面,正常返回
                    return this.nav.pop();
                }
                let tabs = page.tabs;
                let activeNav = tabs.getSelected();
                if (!activeNav.canGoBack()) {
                    // 当前页面为tab栏,退出APP
                    return this.showExit();
                }
                // 当前页面为tab栏的子页面,正常返回
                return activeNav.pop();
            }, 101);

        });
    }

    // 双击退出提示框
    showExit() {
        if (this.backButtonPressed) {
            // 当触发标志为true时,双击返回按键则退出APP
            this.platform.exitApp();
        } else {
            let toast = this.toast.create({
                message: '再按一次退出应用',
                duration: 2000,
                position: 'bottom'
            });
            toast.present();
            this.backButtonPressed = true;
            // 2秒内没有再次点击返回则将触发标志标记为false
            setTimeout(() => {
                this.backButtonPressed = false;
            }, 2000)
        }
    }

}

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值