Ionic2中如何創(chuàng)建App啟動(dòng)頁滑動(dòng)歡迎界面

這篇文章將為大家詳細(xì)講解有關(guān)Ionic2中如何創(chuàng)建App啟動(dòng)頁滑動(dòng)歡迎界面，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

效果如下，圖片來自網(wǎng)絡(luò)

下面例子和上圖稍有不同，主要功能如下：

• 每滑動(dòng)一下展示一張全屏圖片；

• 滑動(dòng)到最后一頁才出現(xiàn)啟動(dòng)按鈕；

• 歡迎界面只在第一次安裝啟動(dòng)時(shí)出現(xiàn)。

下面就讓我們一步一步實(shí)現(xiàn)這個(gè)功能：

1.創(chuàng)建應(yīng)用：

使用Ionic2創(chuàng)建應(yīng)用非常簡單，只需在V1的命令后跟上--v2即可，如下：

ionic start ionic2-welcome --v2

2.創(chuàng)建Component

使用命令行創(chuàng)建頁面或者自行在創(chuàng)建文件

ionic g page welcome

然后打開應(yīng)用跟組件app.component.ts,導(dǎo)入組件,app.module.ts也一樣并配置

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

3.創(chuàng)建模板文件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()">立即啟動(dòng)</button>
        </ion-col>
    </ion-row>
  </ion-slide>
 
</ion-slides>

通過ionic自帶的ion-slides可以很方便的創(chuàng)建一個(gè)歡迎頁面

4.創(chuàng)建welcome.scss

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

5.創(chuàng)建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.在根組件導(dǎo)入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組件，第一次啟動(dòng)會(huì)寫入storage一個(gè)變量firstIn,下次啟動(dòng)時(shí)如果讀取到這個(gè)變量則直接跳過歡迎頁，注意ionic2開始storage默認(rèn)使用的是IndexedDB，而不是LocalStorage

關(guān)于Ionic2中如何創(chuàng)建App啟動(dòng)頁滑動(dòng)歡迎界面就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。