快捷導(dǎo)航

Ionic2創(chuàng)建App啟動(dòng)頁(yè)左右滑動(dòng)歡迎界面

更新時(shí)間：2016年10月30日 16:47:33 投稿：mrr

使用Ionic2創(chuàng)建應(yīng)用非常簡(jiǎn)單，只需在V1的命令后跟上--v2即可.這篇文章主要介紹了Ionic2創(chuàng)建App啟動(dòng)頁(yè)左右滑動(dòng)歡迎界面的相關(guān)資料,需要的朋友可以參考下

摘要:

每個(gè)有逼格的App在第一次啟動(dòng)時(shí)都有一個(gè)歡迎界面，通常是幾個(gè)單頁(yè)面或者帶動(dòng)畫(huà)的單頁(yè)面滑動(dòng)到最后一頁(yè)有個(gè)啟動(dòng)的按鈕，本文將使用Ionic2來(lái)創(chuàng)建，So easy!

效果如下

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

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

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

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

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

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

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

ionic start ionic2-welcome --v2

2.創(chuàng)建Component

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

ionic g page welcome

然后打開(kāi)應(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>

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

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(); 
});
} 
}

這里判斷是否是第一次開(kāi)啟app采用的是native的storage組件，第一次啟動(dòng)會(huì)寫(xiě)入storage一個(gè)變量firstIn,下次啟動(dòng)時(shí)如果讀取到這個(gè)變量則直接跳過(guò)歡迎頁(yè)，注意ionic2開(kāi)始storage默認(rèn)使用的是IndexedDB，而不是LocalStorage

以上所述是小編給大家介紹的Ionic2創(chuàng)建App啟動(dòng)頁(yè)左右滑動(dòng)歡迎界面，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章: