经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » ionic » 查看文章
ionic3双击返回退出应用的方法
来源:jb51  时间:2019/9/17 12:57:52  对本文有异议

ionic3 做双击退出应用的时候按照网上大神的来,从中遇到了一些问题,用this.app.getRootNav().push(MyPage);跳转的页面无法返回,this.app.getActiveNav().pop();这个方法在新的版本中已近被移除了,最后使用另外一种返回方式this.appCtrl.getRootNav().pop();

完整代码:

1.tabs.ts文件

  1. import {Component, ViewChild} from '@angular/core';
  2. import { AboutPage } from '../about/about';
  3. import { ContactPage } from '../contact/contact';
  4. import { HomePage } from '../home/home';
  5. import { MyPage } from '../my/my';
  6. import {Tabs} from "ionic-angular";
  7. @Component({
  8. templateUrl: 'tabs.html'
  9. })
  10. export class TabsPage {
  11. tab1Root = HomePage;
  12. tab2Root = AboutPage;
  13. tab3Root = ContactPage;
  14. tab4Root = MyPage;
  15. @ViewChild('mainTabs') tabs:Tabs;
  16. constructor() {
  17. }
  18. }

2.tabs.html文件

  1. <ion-tabs #mainTabs>
  2. <ion-tab [root]="tab1Root" tabTitle="定位" tabIcon="ios-pin-outline" ></ion-tab>
  3. <ion-tab [root]="tab2Root" tabTitle="运输管理" tabIcon="ios-paper-outline"></ion-tab>
  4. <ion-tab [root]="tab3Root" tabTitle="账单管理" tabIcon="logo-yen"></ion-tab>
  5. <ion-tab [root]="tab4Root" tabTitle="我的" tabIcon="ios-contact-outline"></ion-tab>
  6. </ion-tabs>

3.app.component.ts文件

  1. import {Component, ViewChild} from '@angular/core';
  2. import {Nav, Platform, ToastController,App} from 'ionic-angular';
  3. import { StatusBar } from '@ionic-native/status-bar';
  4. import { SplashScreen } from '@ionic-native/splash-screen';
  5. import { Login } from '../pages/login/login';
  6. import { TabsPage } from '../pages/tabs/tabs';
  7. @Component({
  8. templateUrl: 'app.html'
  9. })
  10. export class MyApp {
  11. rootPage:any;
  12. public backButtonPressed: boolean = false;
  13. @ViewChild("myNav") nav: Nav;
  14. constructor(public platform: Platform,statusBar: StatusBar, splashScreen: SplashScreen,
  15. public toastCtrl: ToastController,public appCtrl:App) {
  16. platform.ready().then(() => {
  17. this.exitApp();
  18. });
  19. }
  20. exitApp() {
  21. this.platform.registerBackButtonAction(() => {
  22. //控制modal、系统自带提示框
  23. let overlay = this.appCtrl._appRoot._overlayPortal.getActive() || this.appCtrl._appRoot._modalPortal.getActive();
  24. if (overlay) {
  25. overlay.dismiss();
  26. return;
  27. }
  28. let activeVC = this.nav.getActive();
  29. let page = activeVC.instance;
  30. if (page.tabs) {
  31. let activeNav = page.tabs.getSelected();
  32. if (activeNav.canGoBack()) {
  33. return activeNav.pop();
  34. } else {
  35. return this.showExit();
  36. }
  37. }
  38. if (page instanceof Login) {//查看当前页面是否是登陆页面
  39. this.showExit();
  40. return;
  41. }
  42. this.appCtrl.getRootNav().pop();//剩余的情况返回操作
  43. });
  44. }
  45. //双击退出函数
  46. showExit() {
  47. if (this.backButtonPressed) {
  48. this.platform.exitApp();
  49. } else {
  50. this.presentToast();//再按一次退出
  51. this.backButtonPressed = true;
  52. setTimeout(() => {
  53. this.backButtonPressed = false;
  54. }, 2000)
  55. }
  56. }
  57. presentToast() {
  58. let toast = this.toastCtrl.create({
  59. message: '再按一次退出应用',
  60. duration: 2000,
  61. position: 'top',
  62. });
  63. toast.onDidDismiss(() => {
  64. console.log('Dismissed toast');
  65. });
  66. toast.present();
  67. }
  68. }

4.app.html文件

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号