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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
May 30 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
鼠标滑过出现预览的大图提示效果
Feb 26 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
关于layui flow loading占位图的实现方法
Sep 21 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Python安装OpenCV的示例代码
2020/03/05 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
金融管理专业毕业生求职信
2014/03/12 职场文书
主持词开场白
2014/03/17 职场文书
北京奥运会口号
2014/06/21 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2015年教师节主持词
2015/07/03 职场文书
高中英语教学反思范文
2016/03/02 职场文书
浅谈Python协程asyncio
2021/06/20 Python