Ionic2中如何创建App启动页滑动欢迎界面

这篇文章将为大家详细讲解有关Ionic2中如何创建App启动页滑动欢迎界面，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

东阿网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联建站成立于2013年到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

效果如下，图片来自网络

下面例子和上图稍有不同，主要功能如下：

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

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

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

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

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启动页滑动欢迎界面就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

名称栏目：Ionic2中如何创建App启动页滑动欢迎界面
浏览地址：https://www.cdcxhl.com/article24/jgoeje.html

成都网站建设公司_创新互联，为您提供电子商务、小程序开发、企业网站制作、网站建设、搜索引擎优化、云服务器

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联