Ionic2創(chuàng)建App啟動頁左右滑動歡迎界面
摘要:
每個有逼格的App在第一次啟動時都有一個歡迎界面，通常是幾個單頁面或者帶動畫的單頁面滑動到最后一頁有個啟動的按鈕，本文將使用Ionic2來創(chuàng)建，So easy!
效果如下
本文例子和上圖稍有不同，主要功能如下：
每滑動一下展示一張全屏圖片；
滑動到最后一頁才出現啟動按鈕；
歡迎界面只在第一次安裝啟動時出現。
下面就讓我們一步一步實現這個功能：
1.創(chuàng)建應用：
使用Ionic2創(chuàng)建應用非常簡單，只需在V1的命令后跟上--v2即可，如下：
ionic start ionic2-welcome --v2
2.創(chuàng)建Component
使用命令行創(chuàng)建頁面或者自行在創(chuàng)建文件
ionic g page welcome
然后打開應用跟組件app.component.ts,導入組件,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()">立即啟動</button> </ion-col> </ion-row> </ion-slide> </ion-slides>
通過ionic自帶的ion-slides可以很方便的創(chuàng)建一個歡迎頁面
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.在根組件導入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
以上所述是小編給大家介紹的Ionic2創(chuàng)建App啟動頁左右滑動歡迎界面，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要介紹了Android編程之界面跳動提示動畫效果實現方法,實例分析了Android動畫效果的布局及功能相關實現技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
自從Android 3.0中引入fragments 的概念，根據詞海的翻譯可以譯為:碎片、片段。下面這篇文章主要給大家分享了關于Android中你可能不知道的Fragment妙用，對大家具有一定的參考學習價值，需要的朋友可以參考下。2017-07-07
這篇文章主要介紹了Android中關于JSON相關應用,較為詳細的分析了Android中關于json相關類與使用方法,需要的朋友可以參考下2016-06-06
Android使用系統(tǒng)自帶的相機實現一鍵拍照功能
這篇文章主要介紹了Android使用系統(tǒng)自帶的相機實現一鍵拍照功能，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
這篇文章主要為大家詳細介紹了Android鬧鐘設置的解決方案，避免開發(fā)Android設置鬧鐘的坑，感興趣的小伙伴們可以參考一下2016-07-07
Android游戲開發(fā)實踐之人物移動地圖的平滑滾動處理
玩過rpg游戲的朋友應該都知道RPG的游戲地圖一般都比較大 今天我和大家分享一下在RPG游戲中如何來處理超出手機屏幕大小的游戲地圖。2014-06-06
這篇文章主要介紹了Kotlin?JSON格式解析，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關于Android內存泄漏的輕松解決方法，文中通過示例代碼介紹的非常詳細，對各位Android具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04
這篇文章主要介紹了Android自動化測試中如何處理各種彈窗,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2021-07-07
這篇文章主要為大家詳細介紹了Android開源庫自定義相機模塊，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05