ionic3雙擊返回退出應(yīng)用的方法
更新時間：2019年09月17日 11:20:47 作者：路與飛鳥
這篇文章主要為大家詳細(xì)介紹了ionic3雙擊返回退出應(yīng)用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
ionic3 做雙擊退出應(yīng)用的時候按照網(wǎng)上大神的來，從中遇到了一些問題，用this.app.getRootNav().push(MyPage);跳轉(zhuǎn)的頁面無法返回，this.app.getActiveNav().pop();這個方法在新的版本中已近被移除了，最后使用另外一種返回方式this.appCtrl.getRootNav().pop();
完整代碼：
1.tabs.ts文件
import {Component, ViewChild} from '@angular/core';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
import { MyPage } from '../my/my';
import {Tabs} from "ionic-angular";
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
tab1Root = HomePage;
tab2Root = AboutPage;
tab3Root = ContactPage;
tab4Root = MyPage;
@ViewChild('mainTabs') tabs:Tabs;
constructor() {
}
}
2.tabs.html文件
<ion-tabs #mainTabs> <ion-tab [root]="tab1Root" tabTitle="定位" tabIcon="ios-pin-outline" ></ion-tab> <ion-tab [root]="tab2Root" tabTitle="運輸管理" tabIcon="ios-paper-outline"></ion-tab> <ion-tab [root]="tab3Root" tabTitle="賬單管理" tabIcon="logo-yen"></ion-tab> <ion-tab [root]="tab4Root" tabTitle="我的" tabIcon="ios-contact-outline"></ion-tab> </ion-tabs>
3.app.component.ts文件
import {Component, ViewChild} from '@angular/core';
import {Nav, Platform, ToastController,App} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Login } from '../pages/login/login';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage:any;
public backButtonPressed: boolean = false;
@ViewChild("myNav") nav: Nav;
constructor(public platform: Platform,statusBar: StatusBar, splashScreen: SplashScreen,
public toastCtrl: ToastController,public appCtrl:App) {
platform.ready().then(() => {
this.exitApp();
});
}
exitApp() {
this.platform.registerBackButtonAction(() => {
//控制modal、系統(tǒng)自帶提示框
let overlay = this.appCtrl._appRoot._overlayPortal.getActive() || this.appCtrl._appRoot._modalPortal.getActive();
if (overlay) {
overlay.dismiss();
return;
}
let activeVC = this.nav.getActive();
let page = activeVC.instance;
if (page.tabs) {
let activeNav = page.tabs.getSelected();
if (activeNav.canGoBack()) {
return activeNav.pop();
} else {
return this.showExit();
}
}
if (page instanceof Login) {//查看當(dāng)前頁面是否是登陸頁面
this.showExit();
return;
}
this.appCtrl.getRootNav().pop();//剩余的情況返回操作
});
}
//雙擊退出函數(shù)
showExit() {
if (this.backButtonPressed) {
this.platform.exitApp();
} else {
this.presentToast();//再按一次退出
this.backButtonPressed = true;
setTimeout(() => {
this.backButtonPressed = false;
}, 2000)
}
}
presentToast() {
let toast = this.toastCtrl.create({
message: '再按一次退出應(yīng)用',
duration: 2000,
position: 'top',
});
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
toast.present();
}
}
4.app.html文件
<ion-nav #myNav [root]="rootPage"></ion-nav>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序 wx.login解密出現(xiàn)亂碼的問題解決辦法
這篇文章主要介紹了微信小程序 wx.login解密出現(xiàn)亂碼的問題解決辦法的相關(guān)資料,需要的朋友可以參考下2017-03-03
變量是存儲信息的容器(JS的變量名是區(qū)分大小寫的),下面這篇文章主要給大家介紹了關(guān)于JS進(jìn)階指南之變量和類型的相關(guān)資料,文章通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
兼容IE,firefox的js tab效果代碼增強版2008-04-04
下面小編就為大家?guī)硪黄狫S轉(zhuǎn)換HTML轉(zhuǎn)義符的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要給大家介紹了關(guān)于如何在JS中如何使用css變量以及export之javascript關(guān)鍵字的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Javascript原生ajax請求代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
JS 事件綁定函數(shù)代碼，解決了瀏覽器兼容，現(xiàn)在可以兼容IE6 7 8 FF 谷歌2010-04-04
javascript 利用arguments實現(xiàn)可變長參數(shù)
在C#中，有可變長參數(shù)params[]，但是在js中，如何實現(xiàn)這種可變參數(shù)呢？本片文章主要介紹利用arguments，實現(xiàn)可變長參數(shù)。有需要的請參考下2016-11-11
微信小程序錄音實現(xiàn)功能并上傳(使用node解析接收)
在我們的日常開發(fā)中經(jīng)常會遇到錄音功能，并上傳到服務(wù)器，今天小編給大家分享微信小程序錄音功能實現(xiàn)并上傳錄音文件，使用node解析接收,需要的朋友可以參考下2020-02-02
本篇文章主要介紹了redux中間件之redux-thunk的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04