ionic3双击返回退出应用的方法

 更新时间:2019年09月17日 11:20:47   作者:路与飞鸟  
这篇文章主要为大家详细介绍了ionic3双击返回退出应用的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

ionic3 做双击退出应用的时候按照网上大神的来,从中遇到了一些问题,用this.app.getRootNav().push(MyPage);跳转的页面无法返回,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、系统自带提示框
   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) {//查看当前页面是否是登陆页面
    this.showExit();
    return;
   }
   this.appCtrl.getRootNav().pop();//剩余的情况返回操作
  });
 }
 
 //双击退出函数
 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: '再按一次退出应用',
   duration: 2000,
   position: 'top',
  });
  toast.onDidDismiss(() => {
   console.log('Dismissed toast');
  });
  toast.present();
 }
}

4.app.html文件

<ion-nav #myNav [root]="rootPage"></ion-nav>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript深入浅出__proto__和prototype

    JavaScript深入浅出__proto__和prototype

    这篇文章主要介绍了JavaScript深入浅出__proto__和prototype,文章基于JavaScript的相关资料展开详细的内容介绍。具有一定的参考价值,需要的小伙伴可以参考一下
    2022-05-05
  • JavaScript Split()方法

    JavaScript Split()方法

    split()方法可以利用字符串的子字符串的作为分隔符将字符串分割为字符串数组,并返回此数组,本文给大家介绍javascript split 方法,对本文感兴趣的朋友一起学习吧
    2015-12-12
  • JavaScript统计字符串中每个字符出现次数完整实例

    JavaScript统计字符串中每个字符出现次数完整实例

    这篇文章主要介绍了JavaScript统计字符串中每个字符出现次数的方法,以完整实例形式分析了JavaScript针对字符串中字符的遍历操作相关技巧,需要的朋友可以参考下
    2016-01-01
  • JS轮播图的实现方法2

    JS轮播图的实现方法2

    这篇文章主要为大家详细介绍了JS轮播图的具体实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 微信小程序内拖动图片实现移动、放大、旋转的方法

    微信小程序内拖动图片实现移动、放大、旋转的方法

    这篇文章主要介绍了微信小程序内拖动图片实现移动、放大、旋转的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • JavaScript数组reduce()方法 

    JavaScript数组reduce()方法 

    这篇文章主要介绍了JavaScript数组reduce()方法,reduce()方法是处理数组的方法,它接收一个函数和一个初始值,然后将数组中的每个元素和初始值当作参数传入这个函数中进行处理,最后返回和初始值相同类型的值,需要的朋友可以参考一下
    2022-01-01
  • 解决uniapp上传小程序体积过大的问题

    解决uniapp上传小程序体积过大的问题

    在昨天的工作中遇到了一个微信小程序上传代码过大的情况,在这里总结一下具体的解决步骤,首先介绍一下,技术栈是使用uniapp框架+HBuilderX的开发环境,需要的朋友可以参考下
    2023-09-09
  • 用JavaScript操作WinRar

    用JavaScript操作WinRar

    Blog的插入HTML功能有誤。 原來在blueidea.com上看到了用ASP執行解壓縮動作的文章,一直沒有去用心看,前日,趁老大不在,爽了一把,把它改成了用JavaScript操作的了。
    2008-04-04
  • uniapp小程序的图片(视频)上传的组件封装方法

    uniapp小程序的图片(视频)上传的组件封装方法

    这篇文章主要介绍了uniapp做小程序的图片(视频)上传的组件封装,要求实现多张图片的上传 ,可以限制图片上传的数量,图片预览,多次使用对图片的上传顺序排序,需要的朋友可以参考下
    2024-02-02
  • Js中使用正则表达式验证输入是否有特殊字符

    Js中使用正则表达式验证输入是否有特殊字符

    这篇文章主要介绍了Js中使用正则表达式验证输入是否有特殊字符的简单代码,并通过一小段代码给大家介绍了js正则表达式验证同一字符串不同,需要的朋友可以参考下
    2018-09-09

最新评论