Question

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

以下是html主页的代码：

public function showDetail($id)
    {
        $event = Event::find($id);
        $name = $event->event_name;
        $template = Template::where('id', $event->template_id)->first();
        $content = File::get($template->file_path);
        $contents = str_replace(array('name'), array( $name), $content);
        file_put_contents($template->file_path, $contents);
        View::addExtension('html', 'php');
        return File::get( $template->file_path);
    }

这是ts文件：

<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>

有人可以帮助解决这个问题！感谢。

Answer 1

将启动画面创建为单独的页面，然后使用setTimeout（）将主页设置为rootPage。在新创建的 splash-screen.ts

中使用以下代码

ionViewDidLoad(){

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

}

Answer 2

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

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

离子2/3：显示闪屏一次

2 个答案: