Creazione di una pagina di benvenuto con scorrimento laterale in Ionic2

Sommario:

Ogni applicazione di alta qualità ha un'interfaccia di benvenuto quando viene avviata per la prima volta, di solito sono alcune pagine singole o pagine singole con animazione che scorrono all'ultima pagina con un pulsante di avvio, in questo articolo useremo Ionic2 per creare, facile!

L'effetto è il seguente

Questo esempio è leggermente diverso dall'immagine sopra, le principali funzioni sono le seguenti:

Ogni scorrimento mostra un'immagine a schermo intero;

La pulsante di avvio appare solo quando si scorre all'ultima pagina;

L'interfaccia di benvenuto appare solo alla prima installazione e avvio.

Ecco come possiamo realizzare questa funzione passo passo:

1. Creare l'applicazione:

Creare un'applicazione con Ionic2 è molto semplice, è sufficiente aggiungere --v2 alla riga di comando di V1, come segue:

ionic start ionic2-welcome --v2

2. Creare il Componente

Creare la pagina utilizzando la riga di comando o creare manualmente il file

ionic g page welcome

Poi aprire l'app e il componente app.component.ts, importare il componente, app.module.ts deve essere configurato allo stesso modo

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

3. Creare il file di modello 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({
<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(() => {
// Bene, quindi la piattaforma è pronta e i nostri plugin sono disponibili.
// Ecco dove puoi fare qualsiasi cosa di livello superiore nativa che potresti aver bisogno.
StatusBar.styleDefault(); 
});
} 
}

Qui si determina se è la prima volta che si avvia l'app utilizzando il componente di storage nativo, quando si avvia per la prima volta viene scritto in storage una variabile firstIn, al successivo avvio se si legge questa variabile si salta direttamente la pagina di benvenuto, si prega di notare che il storage predefinito di ionic2 è IndexedDB, non LocalStorage

Ciò che è stato menzionato sopra è il tutorial di creazione della pagina di benvenuto di scorrimento laterale per l'app Ionic2 che ho introdotto a tutti voi, spero che sia utile a tutti voi. Se avete qualsiasi domanda, non esitate a lasciare un commento, il redattore risponderà prontamente!