ionic2：在页面之间导航非常慢

时间：2017-09-28 08:13:21

标签： ionic-framework ionic2

我正在使用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>

这是一个包含许多代码行的页面，其他代码较少的页面打开的速度比那些

更快

0 个答案:

没有答案
相关问题
最新问题