ionic | app启动动画未登录前显示轮播图| 点击固定定位button进入应用

1.判断storage是否有用户信息

      if(environment.production){
        //this.rootPage= 'LoginPage';
      }else{
        if(undefined == this.storage || null == this.storage){
          this.rootPage = 'SplashPage';
          // this.rootPage = 'LoginPage'
        }else{
          this.storage.get(MinePage.USER_KEY).then((result)=>{
            console.log("缓存中的值=>",result);
            if (null != result && undefined != result){
              console.log("现在正在进行自动登录");
              console.log(result);

              this.authService.systemInit(result);
              this.rootPage= 'TabsPage';
            }else{
              this.rootPage = 'SplashPage';
              // this.rootPage = 'LoginPage'
            }
          });
        }
      }

2.轮播结束点击button登录/注册,button的样式固定定位在img上

.html

  <ion-slides class="coverFlow" pager="true">
    <ion-slide>
      <img src="./assets/test/splash1.jpg">
    </ion-slide>
    <ion-slide>
      <img src="./assets/test/splash2.jpg">
    </ion-slide>
    <ion-slide>
      <img src="./assets/test/splash3.jpg">
      <button class="btnPosition" (click)="enterApp()">立即使用</button>
    </ion-slide>
  </ion-slides>
.scss

page-splash {
  .btnPosition {
    font-size: 20px;
    height: 50px;
    width: 34%;
    border-radius: 30px;
    position: fixed;
    bottom: 17%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: white;
    color: #233179;
  }
}

.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the SplashPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-splash',
  templateUrl: 'splash.html',
})
export class SplashPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SplashPage');
  }
  enterApp(){
    this.navCtrl.push("LoginPage")
  }

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值