效果演示

源代码已上传到github

由于ionic版本更新较快,有些写法可能改变来不及更新简书,请以github代码为准

ionic2-完美处理安卓硬件返回按钮.gif

介绍

• 注册安卓硬件返回按钮事件是必须的,因为用户不小心点击了返回按钮就退出app体验很不好. 所以当用户点击返回按钮,应该提示"再按一次退出"

• 不想实现"再按一次退出",想实现像QQ一样按返回最小化app?可以"author": "Ionic Framework",
  "homepage": ""scripts": {
  "clean": "ionic-app-scripts clean",
  "build": "ionic-app-scripts build",
  "ionic:build": "ionic-app-scripts build",
  "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
  "@angular/common": "2.2.1",
  "@angular/compiler": "2.2.1",
  "@angular/compiler-cli": "2.2.1",
  "@angular/core": "2.2.1",
  "@angular/forms": "2.2.1",
  "@angular/http": "2.2.1",
  "@angular/platform-browser": "2.2.1",
  "@angular/platform-browser-dynamic": "2.2.1",
  "@angular/platform-server": "2.2.1",
  "@ionic/storage": "1.1.7",
  "ionic-angular": "2.0.0-rc.4",
  "ionic-native": "2.2.11",
  "ionicons": "3.0.0",
  "rxjs": "5.0.0-beta.12",
  "zone.js": "0.6.26"
  },
  "devDependencies": {
  "@ionic/app-scripts": "0.0.47",
  "typescript": "2.0.9"
  }
  }

• 今天(2017年3月17日 10:12:31)升级到最新版本,代码不变,依然可以用,特此说明

  
  

  

核心代码

核心代码就4个文件,这4个文件中的完整代码如下

1. app.html,添加#myNav,在app.component.ts文件通过@ViewChild('myNav')获取
   <ion-nav #myNav [root]="rootPage"></ion-nav>

• }

• tabs.html,添加#mainTabs,在tabs.ts文件通过@ViewChild('mainTabs') tabs:Tabs;获取
  <ion-tabs #mainTabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
  </ion-tabs>

• tabs.ts
  import {Component, ViewChild} from '@angular/core';
  import { HomePage } from '../home/home';
  import { AboutPage } from '../about/about';
  import { ContactPage } from '../contact/contact';
  import {Tabs} from "ionic-angular";

   @Component({   templateUrl: 'tabs.html'
   }) export class TabsPage {
     @ViewChild('mainTabs') tabs:Tabs;
     tab1Root: any = HomePage;
     tab2Root: any = AboutPage;
     tab3Root: any = ContactPage; 
     constructor() {
     }
   }

今天(2017年3月21日 22:34:42)添加隐藏键盘事件

作者：小军617
链接：https://www.jianshu.com/p/6aa5a8318092