Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to create an App startup page slide welcome interface in Ionic2. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

The effect is as follows, the picture is from the Internet.

The following example is slightly different from the figure above, and the main functions are as follows:

Show a full-screen picture with each slide

Slide to the last page before the start button appears

The welcome interface appears only when the first installation starts.

Let's do this step by step:

1. Create an application:

Creating an application using Ionic2 is very simple, as long as the command in V1 is followed by-v2, as follows:

Ionic start ionic2-welcome-- v2

two。 Create Component

Use the command line to create a page or create your own file

Ionic g page welcome

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

Import {WelcomePage} from'.. / pages/welcome/welcome'

3. Create a template file welcome.html

Start immediately

You can easily create a welcome page through the ion-slides that comes with ionic.

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

6. Import the welcome component in the root component and edit the 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: ``,}) 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 to determine whether the storage component of native is used to open app for the first time. The first startup will write a variable firstIn of storage. If you read this variable, you will skip the welcome page next time. Note that ionic2 starts storage using IndexedDB by default, not LocalStorage.

On how to create App launch page in Ionic2 slide welcome interface to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.