Создание стартового экрана и экрана приветствия с прокруткой в Ionic2

Резюме:

Каждое уважающее себя приложение имеет витражную страницу при первом запуске, обычно это несколько одинарных страниц или страниц с анимацией, которые скользят до последней страницы с кнопкой запуска. В этой статье мы будем использовать Ionic2 для создания, So easy!

Эффект следующий

Этот пример и上图略有不同, основные функции такие:

Каждый раз, когда вы скользите, отображается полная экранная картинка;

Кнопка запуска появляется только на последней странице.

Витражная страница появляется только при первом запуске установки.

Давайте шаг за шагом реализуем эту функцию:

1. Создание приложения:

Создание приложения с помощью Ionic2 очень просто, просто добавьте --v2 после команды V1, как показано ниже:

ionic start ionic2-welcome --v2

2. Создание компонента

Создайте страницу с помощью команды строки или создайте файл самостоятельно

ionic g page welcome

Затем откройте приложение и компонент app.component.ts, импортируйте компонент, app.module.ts также и настройте

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

3. Создание шаблона файла welcome.html

Использование ионических слайдов 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'; 

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';

<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(() => {
// Хорошо, так что платформа готова и наши плагины доступны.
// Здесь вы можете выполнить любые более высокие уровневые.native вещи, которые могут вам потребоваться.
StatusBar.styleDefault(); 
});
} 
}

Здесь проверяется, является ли это первым запуском приложения, используется компонент native storage. При первом запуске в storage записывается переменная firstIn, при следующем запуске, если переменная обнаружена, приветственная страница пропускается. Обратите внимание, что в Ionic2 по умолчанию используется IndexedDB, а не LocalStorage.

Вновь упомянутые это руководства, которые я представил вам, как создать стартовую страницу приложения Ionic2 с左右 скроллингом для приветственной страницы, надеюсь, это поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставляйте комментарии, я отвечу вам своевременно!