Ionic2Appの起動ページを左右にスライドしてウェルカムインターフェースを作成する

要約:

素敵なアプリは初めて起動したときにウェルカム画面がありますが、通常は数ページの単一ページまたはアニメーション付きの単一ページで最後のページにスタートボタンがあります。この記事ではIonicを使用して2作成します、とても簡単です！

効果は以下の通りです

この例と上の図は少し異なりますが、主な機能は以下の通りです：

一度スライドすると、全画面の画像が一つ表示されます；

最後のページにスライドして初めてスタートボタンが表示されます；

ウェルカム画面は初めてインストールして起動したときにのみ表示されます。

それでは、この機能を実現するために一つ一つ手順を説明しましょう：

1.アプリを作成：

を使用して2アプリを作成するのは非常に簡単で、V1のコマンドの後に続けます--v2それで良いですね、以下のようになります：

ionic start ionic2-welcome --v2

2Componentを作成します。

コマンドラインを使用してページを作成するか、ファイルを作成して手動で作成します。

ionic g page welcome

次に、アプリのルートコンポーネントapp.component.tsを開き、コンポーネントをインポートし、app.module.tsも同様にインポートし設定します。

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

3welcome.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を使って簡単にウェルカムページを作成できます。

4welcome.scssを作成します。

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

5welcome.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(() => {
// いいですね、プラットフォームが準備ができて、プラグインが利用可能です。
// ここでは、必要なハイレベルなネイティブな操作を行うことができます。
StatusBar.styleDefault(); 
});
} 
}

アプリケーションが初めて起動するかどうかを判断するために、nativeのstorageコンポーネントを使用しています。初めて起動した場合、storageにfirstInという変数を書き込みます。次回起動時、この変数が読み取れるとウェルカムページをスキップします。注意：ionic2storageはデフォルトでIndexedDBを使用しており、LocalStorageではありません。

以上は編集者が皆様に紹介したIonicです。2Appのスタートページを作成し、左右にスライドしてウェルカムインターフェースを表示しました。皆様に役立つことを願っています。何かご不明な点がございましたら、コメントをお願いします。編集者がすぐに回答します。