Ionic2：建立App啓動頁滑動歡迎界面

效果以下，圖片來自網絡

本文例子和上圖稍有不一樣，主要功能以下：

• 每滑動一下展現一張全屏圖片；
• 滑動到最後一頁纔出現啓動按鈕；
• 歡迎界面只在第一次安裝啓動時出現。

下面就讓咱們一步一步實現這個功能：

1.建立應用：

使用Ionic2建立應用很是簡單，只需在V1的命令後跟上--v2便可，以下：

ionic start ionic2-welcome --v2

2.建立Component

使用命令行建立頁面或者自行在建立文件

ionic g page welcome

而後打開應用跟組件app.component.ts,導入組件,app.module.ts也同樣並配置

import { WelcomePage } from '../pages/welcome/welcome';

3.建立模板文件welcome.html

<ion-slides pager>
 
  <ion-slide>
    <img src="images/slide1.png" />
  </ion-slide>
 
  <ion-slide>
    <img src="images/slide2.png" />
  </ion-slide>
 
  <ion-slide>
    <img src="images/slide3.png" />
  </ion-slide>
 
  <ion-slide>
    <ion-row>
        <ion-col>
            <img src="images/slide4.png" />
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col>
            <button light (click)="goToHome()">當即啓動</button>
        </ion-col>
    </ion-row>
  </ion-slide>
 
</ion-slides>

經過ionic自帶的ion-slides能夠很方便的建立一個歡迎頁面

4.建立welcome.scss

ion-slide {
    background-color: #eeeeee;
}
 
ion-slide img {
    height: 70vh !important;
    width: auto !important;
}

5.建立welcome.ts

import { Component } from '@angular/core';
import {NavController} from 'ionic-angular';
import {HomePage} from '../home/home';  
 
@Component({
    templateUrl: 'welcome.html'
})
export class WelcomePage {
    constructor(public navCtr: NavController){ 
    }
 
    goToHome(){
        this.navCtr.setRoot(HomePage);
    }
}

6.在根組件導入welcome組件，編輯app.moudle.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { WelcomePage } from '../pages/welcome/welcome';
import { Storage } from '@ionic/storage';
@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`,
   
})
export class MyApp { 
  rootPage: any; 

  constructor(platform: Platform, public storage: Storage) {

    this.storage.get('firstIn').then((result) => { 
             
      if(result){  
        this.rootPage = HomePage; 
      } 
      else{
        this.storage.set('firstIn', true);
        this.rootPage = WelcomePage;
      }
            
    }
    );  

  	
 
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault(); 
    });
  } 
}

這裏判斷是不是第一次開啓app採用的是native的storage組件，第一次啓動會寫入storage一個變量firstIn,下次啓動時若是讀取到這個變量則直接跳過歡迎頁，注意ionic2開始storage默認使用的是IndexedDB，而不是LocalStorage