欢迎来到代码驿站!

Android代码

当前位置:首页 > 移动开发 > Android代码

Ionic2创建App启动页左右滑动欢迎界面

时间:2021-01-18 14:44:41|栏目:Android代码|点击:

摘要:

每个有逼格的App在第一次启动时都有一个欢迎界面,通常是几个单页面或者带动画的单页面滑动到最后一页有个启动的按钮,本文将使用Ionic2来创建,So easy!

效果如下

本文例子和上图稍有不同,主要功能如下:

每滑动一下展示一张全屏图片;

滑动到最后一页才出现启动按钮;

欢迎界面只在第一次安装启动时出现。

下面就让我们一步一步实现这个功能:

1.创建应用:

使用Ionic2创建应用非常简单,只需在V1的命令后跟上--v2即可,如下:

ionic start ionic2-welcome --v2

2.创建Component

使用命令行创建页面或者自行在创建文件

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>

通过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({
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(); 
});
} 
}

这里判断是否是第一次开启app采用的是native的storage组件,第一次启动会写入storage一个变量firstIn,下次启动时如果读取到这个变量则直接跳过欢迎页,注意ionic2开始storage默认使用的是IndexedDB,而不是LocalStorage

以上所述是小编给大家介绍的Ionic2创建App启动页左右滑动欢迎界面,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

上一篇:Android开发自学路线图

栏    目:Android代码

下一篇:教你制作Android中炫酷的ViewPagerIndicator(不仅仿MIUI)

本文标题:Ionic2创建App启动页左右滑动欢迎界面

本文地址:http://www.codeinn.net/misctech/47015.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有