ionic 2/3：显示启动画面一次

Question

我有一个 ionic 应用程序，当我启动该应用程序然后显示主页时，它打开了启动画面，问题是当我 return 从一个页面到主页时，启动画面再次出现！我希望它在应用程序启动时只显示一次。

这是 html 主页的代码：

<div id="custom-overlay" [style.display]="splash ? 'flex': 'none'">
    <div class="flb">
        <div class="Aligner-item Aligner-item--top"></div>
        <img class="splash-screen-logo" src="img/logo.svg">
        <div class="Aligner-item Aligner-item-bottom"></div>
    </div>
</div>
<ion-header>
    <ion-toolbar color="primary">
        <div class="search-icon">
            <ion-icon name="ios-search" icon-only>
            </ion-icon>
        </div>
        <ion-title class="bartitle"><b>parrot</b><small class="city">.city</small></ion-title>
    </ion-toolbar>
</ion-header>

<ion-content>

    <ion-card>
        <img src="img/dirty.jpg">
        <ion-fab (click)="ParrotToast();" class="pubplace" left buttom>
            <img src="img/place.png">
        </ion-fab>
        <div class="row">
            <div class="puboptions col col-33">
                <ul class="row rowlist">
                    <li class="col">
                        <ion-icon class="col" name="md-ribbon"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-thumbs-up"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-share"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-more"></ion-icon>
                    </li>

                </ul>
            </div>
        </div>
        <ion-row>
            <ion-col>
                <ion-item class="pubinformation">
                    <ion-avatar item-start>
                        <img src="img/profile.jpg">
                    </ion-avatar>
                    <h3><b>Essie Bailey</b></h3>
                    <p> <small>ARTIST SPOTTER</small></p>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item class="likes">
                    <ion-note text-center>
                        <b class="likenumber">3 likes</b>
                    </ion-note>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-item class="pubinformation">
                <strong> Museé du Cinquantenaire</strong>
                <small class="datepub">IL Y A 2 SEMAINES</small>
            </ion-item>
            <ion-col class="hashtagsdiv" padding width-10>
                <p class="hashtags">#consectetur #adipiscing #elit #Aliquam #quis #ultrices #quam #at #interdum #ante</p>
            </ion-col>
        </ion-row>
    </ion-card>

    <ion-card>
        <img src="img/dirty.jpg">
        <ion-fab (click)="ParrotToast();" class="pubplace" left buttom>
            <img src="img/place.png">
        </ion-fab>
        <div class="row">
            <div class="puboptions col col-33">
                <ul class="row rowlist">
                    <li class="col">
                        <ion-icon class="col" name="md-ribbon"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-thumbs-up"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-share"></ion-icon>
                    </li>
                    <li class="col">
                        <ion-icon class="col" name="md-more"></ion-icon>
                    </li>

                </ul>
            </div>
        </div>

        <ion-row>
            <ion-col>
                <ion-item class="pubinformation">
                    <ion-avatar item-start>
                        <img src="img/profile.jpg">
                    </ion-avatar>
                    <h3>Essie Bailey</h3>
                    <p> <small>ARTIST SPOTTER</small></p>
                </ion-item>
            </ion-col>
            <ion-col>
                <ion-item class="likes">
                    <ion-note text-center>
                        <b>3 likes</b>
                    </ion-note>
                </ion-item>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-item>
                <strong> Museé du Cinquantenaire</strong>
                <small class="datepub">IL Y A 2 SEMAINES</small>
            </ion-item>
            <ion-col class="hashtagsdiv" padding width-10>
                <p class="hashtags">#consectetur #adipiscing #elit #Aliquam #quis #ultrices #quam #at #interdum #ante</p>
            </ion-col>
        </ion-row>
    </ion-card>

</ion-content>

这是 ts 文件：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ParrotToastPage } from '../parrot-toast/parrot-toast'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  splash=true;
  tabBarElemen: any;
  LogoSplashScreen: any;


  constructor(public navCtrl: NavController) {
    this.tabBarElemen = document.querySelector('.tabbar');

  }

  ionViewDidLoad(){
    this.tabBarElemen.style.display = 'none';

    setTimeout(() => {
        this.splash = false;
    this.tabBarElemen.style.display = 'flex';

    }, 2000);
  }

  ParrotToast(){
    this.navCtrl.push(ParrotToastPage);
  }

}

有人可以帮忙解决这个问题吗！谢谢。

Answer 1

我认为你需要使用本地存储：

this.storage.get('splash').then((splash) => {
  if (splash == undefined || splash == null) {
    this.storage.set('splash', 'visit');
    //show splash
  }
});

Answer 2

将初始屏幕创建为单独的页面，然后使用 setTimeout() 将主页设置为 rootPage。在新创建的 splash-screen.ts

中使用以下代码

ionViewDidLoad(){

  setTimeout(() => {
    this.navCtrl.setRoot(HomePage);
  }, 2000);

}

ionic 2/3：显示启动画面一次

ionic 2/3 : show splash screen one time

splash-screen

typescript

ionic-framework

ionic3