Ionic2Creating a Welcome Interface with Left and Right Swiping on App Startup Page

Summary:

Every cool app has a welcome interface when it is first launched, usually a few single pages or animated single pages sliding to the last page with a start button. This article will use Ionic2to create, So easy!

The effect is as follows

This example is slightly different from the previous one, with the following main functions:

a full-screen image is displayed for each swipe;

The start button appears only when you swipe to the last page;

The welcome interface only appears when the application is installed and started for the first time.

Let's implement this feature step by step below:

1. Create application:

using Ionic2Creating an application is very simple, just type in V1followed by the command--v2it's that simple, as shown below:

ionic start ionic2-welcome --v2

2.Create Component

Create pages using the command line or create files manually

ionic g page welcome

Then open the application root component app.component.ts, import the component, and configure app.module.ts as well

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

3.Create the template file 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()">Start Now</button>
</ion-col>
</ion-row>
</ion-slide>
</ion-slides>

Through the built-in ion-Slides can easily create a welcome page

4.Create welcome.scss

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

5.Create 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);
}
}

6In the root component, import the welcome component and edit 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(); 
});
} 
}

Here, whether it is the first time to open the app is determined by the native storage component, and a variable firstIn will be written to the storage when it starts for the first time. If this variable is read when starting next time, the welcome page will be skipped directly, note ionic2The default storage used when starting is IndexedDB, not LocalStorage

The above is what the editor has introduced to everyone about Ionic2Create a left and right sliding welcome interface for the App startup page, hoping it will be helpful to everyone. If you have any questions, please leave me a message, and the editor will reply to everyone in time!