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


Posted in Javascript onSeptember 17, 2019

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 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
canvas实现图像截取功能
Feb 06 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 #Javascript
vue.js购物车添加商品组件的方法
Sep 17 #Javascript
关于vue项目中搜索节流的实现代码
Sep 17 #Javascript
Vue的生命周期操作示例
Sep 17 #Javascript
小程序两种滚动公告栏的实现方法
Sep 17 #Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 #Javascript
react native 仿微信聊天室实例代码
Sep 17 #Javascript
You might like
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php session 写入数据库
2016/02/13 PHP
JavaScript 程序编码规范
2010/11/23 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
Python Tkinter简单布局实例教程
2014/09/03 Python
python中global用法实例分析
2015/04/30 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python opencv实现图像边缘检测
2019/04/29 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
python opencv实现简易画图板
2020/08/27 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
HTML5本地存储和本地数据库实例详解
2017/09/05 HTML / CSS
瑞士国际航空官网:SWISS
2016/07/21 全球购物
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
经理管理专业毕业自荐书范文
2014/02/12 职场文书
美食节目策划方案
2014/05/31 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2014年实习期工作总结
2014/11/27 职场文书
酒店宣传语大全
2015/07/13 职场文书
植树节新闻稿
2015/07/17 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android
Springboot集成阿里云OSS上传文件系统教程
2021/06/28 Java/Android