我正在使用Ionic2，我注意到在复杂页面之间导航或打开复杂页面非常慢，是否有针对此问题的解决方案
注意：复杂页面表示具有大型html和scss代码的页面，这是一个示例
import { ReviewPage } from '../review/review';
import { DescriptionPage } from '../description/description';
import { Component } from '@angular/core';
import { ModalController, NavController, NavParams, PopoverController, ViewController } from 'ionic-angular';
import { SocialSharing } from '@ionic-native/social-sharing';
import { AppSettingsProvider } from '../../providers/app-settings/app-settings';
@Component({
selector: 'page-product',
templateUrl: 'product.html',
})
export class ProductPage {
popvarOrderArr = ['Home','My Account','Cart','Wishlist','Specials'];
productsArr:number[] = new Array(6) ;
reviewsArr:number[] = new Array(2) ;
hashtagSliderArr:number[] = new Array(6) ;
contactModal;
firstViewCtrl;
rate = 3;
constructor(public appSettingsProvider:AppSettingsProvider,public modalCtrl: ModalController,public navCtrl: NavController, public navParams: NavParams,public popoverCtrl: PopoverController,public viewCtr:ViewController,private socialSharing: SocialSharing) {
console.log(this.getCurrentLAnguage());
}
starClicked(value){
console.log("Avaliaram em :", value);
}
gotoDecriptionPage() {
this.navCtrl.push(DescriptionPage);
}
goToReviewsPage() {
this.navCtrl.push(ReviewPage);
}
goToProductPage() {
this.navCtrl.push(ProductPage);
}
share() {
this.socialSharing.share('Hello World', 'Attention', null, 'https://www.thepolyglotdeveloper.com').then(() => {
// Success!
}).catch(() => {
// Error!
});
}
getCurrentLAnguage() {
return this.appSettingsProvider.Language;
}
}page-product {
#firstCard {
width: 100%;
height: 44%;
text-align: center;
vertical-align: middle;
}
#headerSlider {
width: 100%;
height: 50%;
margin-top: 8%;
img {
width: 50%;
height: 75%;
margin-top: 10%;
text-align: center;
align-items: center;
// left: 0;
// right: 0;
margin: 0 auto;
}
}
ul {
padding: 0px;
margin: 0;
&.rating li {
padding: 0px 0px !important;
background: none;
color: gold;
}
}
#bottomSlider {
margin-top: 4%;
height: 40%;
.slider .slider-pager {
text-align: right;
}
}
#addSpan {
padding-left: 5%;
padding-left: 2%;
}
.sliderBtn {
background-color: #c1eee1;
color: #2fb991;
}
#checkoutBtn {
background-color: #2fb991;
color: white;
}
#productCard {
margin-top: 3%;
width: 100%;
}
#oldPrice {
text-decoration: line-through;
font-size: 12px;
color: gray;
}
#newPrice {
font-size: 15px;
color: red;
font-weight: bold;
}
#productName {
font-weight: bold;
}
#productNameslider {
font-size: 14px;
font-weight: bold;
}
#FgrayBtn,
#SgrayBtn {
color: gray;
background-color: #f7f5fa;
}
#SgrayBtn {
width: 10%;
}
#productDec {
font-size: 15px;
}
#grayTxt {
color: gray;
}
#body {
background-color: #F0F0F0;
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal>.swiper-pagination-bullets {
left: 0;
bottom: 80%;
width: 100%;
}
.swiper-pagination-bullets .swiper-pagination-bullets-active {
color: red;
}
ion-content div.scroll-content {
background-color: transparent;
// opacity: 0.6;
}
.modal-wrapper {
z-index: 10;
height: 100%;
// transform: translateY(55%);
}
.SMBtn {
border-radius: 50%;
background-size: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.optionName {
font-size: 10px;
color: gray;
}
}<ion-header >
<ion-navbar color="dark">
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Product</ion-title>
<ion-buttons end mode="md" (click)="share()">
<button ion-button icon-only no-padding no-margin>
<ion-icon name="md-share"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end mode="md" style="padding:0;margin:0;">
<cart-icon no-padding no-margin></cart-icon>
</ion-buttons>
<ion-buttons end mode="md" style="padding:0;margin:0;">
<more-icon no-padding no-margin></more-icon>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content id="body">
<ion-card no-padding no-margin id="firstCard" text-center>
<div id="headerSlider">
<img src="././assets/images/camera.jpg" />
</div>
<div id="bottomSlider">
<ion-slides pager direction="horizontal" slidesPerView="3.0" spaceBetween="37" autoplay="3000" speed="3000">
<ion-slide *ngFor="let product of hashtagSliderArr">
<button ion-button class="sliderBtn">PowerShot</button>
</ion-slide>
</ion-slides>
</div>
</ion-card>
<ion-card no-padding no-margin id="productCard">
<ion-list>
<ion-item>
<h2 id="productName">Canon Powershot SX60 HS</h2>
<p>{{"AVIALABILITY" | translate}}:5</p>
</ion-item>
<ion-item text-center>
<div style="float:left;margin-left:15%;">
<span id="newPrice">100.900KD</span><br/>
<span id="oldPrice">119.900KD</span><br/>
</div>
<div style="float:right;margin-right:15%;">
<rating no-padding [(ngModel)]="rate" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false" (ngModelChange)="onModelChange($event)"></rating>
<p>(6){{"REVIEWS" | translate}}</p>
</div>
<ion-icon *ngIf="getCurrentLAnguage()=='en'" name="ios-arrow-forward" style="color:lightgray;" item-end></ion-icon>
<ion-icon *ngIf="getCurrentLAnguage()=='ar'" name="ios-arrow-back" style="color:lightgray;" item-end></ion-icon>
</ion-item>
<ion-item text-center>
<button ion-button id="checkoutBtn">{{"CHECKOUT" | translate}}</button>
<button ion-button id="FgrayBtn" icon-left><ion-icon name="cart"></ion-icon><span id="addSpan">{{"ADDTOCART" | translate }}</span></button>
<button ion-button text-center id="SgrayBtn" icon-only><ion-icon name="ios-heart"></ion-icon></button>
</ion-item>
</ion-list>
</ion-card>
<ion-card no-padding no-margin id="productCard">
<ion-list>
<ion-item>
{{"DESCRIPTION" | translate }}
</ion-item>
<ion-item>
<ion-list>
<ion-row>
<ion-col col-6 id="grayTxt">
{{"BRAND" | translate}}
</ion-col>
<ion-col col-6 id="productDec">
Canon
</ion-col>
</ion-row>
<ion-row>
<ion-col col-6 id="grayTxt">
{{"PRODUCTCODE" | translate }}
</ion-col>
<ion-col col-6 id="productDec">
Canon PowerShot SX60 HS
</ion-col>
</ion-row>
</ion-list>
</ion-item>
<hr/>
<ion-item>
<span text-wrap style="font-size:15px;">
Explore detail at a distace<br/>
Explore detail at a distace Explore detail at a distace Explore detail at a distace Explore detail at a distace Explore detail at a distace
Explore detail at a distace Explore detail at a distace Explore detail at a distace Explore detail at a distace
</span>
</ion-item>
<hr/>
<ion-item text-center style="color:red;" (click)="gotoDecriptionPage()">
{{"VIEWALL" | translate}}
</ion-item>
</ion-list>
</ion-card>
<ion-card no-padding no-margin id="productCard">
<ion-list>
<ion-item>
{{"REVIEWS" | translate}}(6)
</ion-item>
<ion-item *ngFor="let review of reviewsArr">
<ion-avatar item-start>
<img src="http://safe-pay.co/safepay/public/uploadedimg/user/avatar.png">
</ion-avatar>
<h2>Mai1234</h2>
<p>23 jun 2014</p>
<rating no-padding [(ngModel)]="rate" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false" (ngModelChange)="onModelChange($event)"></rating>
<span id="productDec">Exellent Very Good</span>
</ion-item>
</ion-list>
</ion-card>
<h5 style="padding-left:3%;padding-right:3%;margin-bottom:0;">{{"RELATEDPRODUCTS" | translate }}</h5>
<ion-slides no-margin no-padding autoplay="3000" speed="3000" direction="horizontal" slidesPerView="2.1" spaceBetween="0" style="height:45%;">
<ion-slide *ngFor="let product of productsArr" (click)="goToProductPage()">
<ion-card>
<div>
<img src="././assets/icons/favorite.svg" align="right" style="margin-top:5%;margin-right:5%;float:right;width:11%;height:11%;" />
</div>
<ion-item>
<img src="././assets/images/camera.jpg" style="width:45px;height:45px;margin-left:30%;" />
</ion-item>
<ion-item>
<div style="margin-right:4%;text-align:center">
<span id="productNameslider" no-wrap>Canon Power shot SX60 HS</span><br/>
<span id="oldPrice">119.900KD</span><br/>
<span id="newPrice">100.900KD</span><br/>
<rating no-padding [(ngModel)]="rate" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false" (ngModelChange)="onModelChange($event)"></rating>
</div>
</ion-item>
</ion-card>
</ion-slide>
</ion-slides>
</ion-content>
这是一个包含许多代码行的页面，其他代码较少的页面打开的速度比那些
更快