إنشاء صفحة الترحيب في تطبيق 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

استخدام <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>

يمكنك بسهولة إنشاء صفحة ترحيب باستخدام "ion-slides" المدمج في Ionic

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({
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(() => {
// حسنًا، لقد أصبح المنصة جاهزة ومكوناتنا متاحة.
// هنا يمكنك القيام بأي شيء على مستوى أعلى من المكونات المحلية التي قد تحتاجها.
StatusBar.styleDefault(); 
});
} 
}

يتم التحقق من whether هو المرة الأولى التي يتم فيها فتح التطبيق باستخدام مكون التخزين المحلي native، حيث يتم كتابة متغير firstIn في التخزين عند التشغيل لأول مرة، وإذا تم قراءة هذا المتغير في المرة التالية، يتم التخطي مباشرة إلى صفحة الترحيب، يرجى ملاحظة أن التخزين الافتراضي في Ionic2 يستخدم IndexedDB وليس LocalStorage.

ما ذكرته أعلاه هو ما قدمته لك محرري الموقع لإنشاء صفحة الترحيب الخاصة بـ Ionic2 مع التمرير الجانبي للصفحة الترحيبية، آمل أن يكون هذا مفيدًا لك، إذا كان لديك أي استفسارات، فلا تتردد في ترك تعليق، وسأقوم بالرد عليك في أقرب وقت ممكن.