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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
纯JavaScript手写图片轮播代码
Oct 20 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
seajs下require书写约定实例分析
May 16 Javascript
关于layui表单中按钮自动提交的解决方法
Sep 09 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 27 Javascript
ReactRouter的实现方法
Jan 25 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
大师制作的中短波矿石收音机
2020/04/02 无线电
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python调用支付宝支付接口流程
2019/08/15 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
台湾良兴购物网:EcLife
2019/12/01 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
销售主管的自我评价分享
2014/01/03 职场文书
党员公开承诺书
2014/03/25 职场文书
物理学专业自荐信
2014/06/11 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
质检员岗位职责范本
2015/04/07 职场文书
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang