Question

我在Ionic3应用程序中使用了标签模板，共有3页，所有这些都带有图片。当应用程序加载时，HomePage正常呈现图像并且没有延迟。但是，当我第一次尝试打开其他页面时，打开页面和图像加载之间有相当长的时间。加载页面后，这种情况就不再发生了。

所有图像都装在卡片内，如下所示：

<ion-card>
    <img src="assets/prettyimg.png"/>
    <div class="card-title">Pretty!</div>
    <div class="card-subtitle">Pretty pretty!</div>
</ion-card>

在Ionic内部文档中，我没有找到与在后台加载页面或图像相关的任何内容。

我尝试在主页中使用this.nav.push(SecondPage);，在ionViewDidLoad() {this.navCtrl.pop();}之前使用this.splashScreen.hide();，但这是一个愚蠢的解决方法，因为它实际上是推送和弹出在启动闪屏时显示页面。

有一种方法可以在应用启动期间加载所有页面，甚至可以在页面加载前显示微调器吗？

tabs.html

<ion-tabs id="navigationtabs" color="primary">
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="ice-cream"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="card"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';
import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;
  constructor() {}
}

about.html（第二页）

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

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  constructor(public navCtrl: NavController) {}
}

about.html（第二页）

<ion-header>
  <ion-navbar color="primary">
   <ion-title><img src="assets/logo.png" style="display:inline-block" width="112px"/></ion-title>
    <ion-buttons end>
      <button ion-button icon-only>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="card-background-page">

  <ion-card>
    <img src="assets/sorvete.png"/>
    <div class="card-title">Sorvetes</div>
    <div class="card-subtitle">Deliciosas combinações para você escolher!</div>
  </ion-card>

  <ion-card>
    <img src="assets/cobertura.png"/>
    <div class="card-title">Coberturas</div>
    <div class="card-subtitle">Para você dar o toque final no seu sorvete!</div>
  </ion-card>

  <ion-card>
    <img src="assets/acai.png"/>
    <div class="card-title">Açaí na Tigela</div>
    <div class="card-subtitle">Prove o saboroso açaí na tigela!</div>
  </ion-card>

  <ion-card>
    <img src="assets/gelatos.png"/>
    <div class="card-title">Gelatos Italianos</div>
    <div class="card-subtitle">Para paladares exigentes!</div>
  </ion-card>

  <ion-card>
    <img src="assets/doce.png"/>
    <div class="card-title">Doces</div>
    <div class="card-subtitle">De dar água na boca!</div>
  </ion-card>

  <ion-card>
    <img src="assets/salgado.png"/>
    <div class="card-title">Salgados</div>
    <div class="card-subtitle">Saborosos lanches para você apreciar!</div>
  </ion-card>

  <ion-card>
    <img src="assets/outro.png"/>
    <div class="card-title">Bebidas</div>
  </ion-card>

</ion-content>

Answer 1

如果您的代码需要在显示之前在其他页面中运行，您可以将其他页面导入主页并执行您需要执行的所有操作。切换页面时，所有离子操作都是加载dom

在Ionic3

1 个答案: