Ionic3 - 设置标题样式的正确方法

Question

我们有一个 Ionic 3 项目，我们对默认标题样式进行了大量修改。每个 ion-header 元素都被分配了一个“big-header”类，用于更新颜色、按钮布局和标题高度。样式应用在app.scss 文件中。

标题样式的更新似乎对性能产生了重大影响。看起来样式也可以在视图加载后应用。使用旧的默认高度时会出现短暂的“打嗝”。

是否有一种“正确”的方式来修改对资源更友好的标头？

---

作为参考，这里是应用的 CSS：

/* Header Overwrite */
ion-header.big-header {
    border-bottom: none !important;
    /*box-shadow: 0px 4px 17px rgba(0,0,0,0.30);*/
    .bar-buttons-md[end] {
        float:right;
        padding-top:4px;
        padding-right:4px;
    }
    ion-navbar.toolbar {
        display:block;
    }
    ion-buttons, .bar-button-menutoggle {
        display:inline-block;
        width:50%;
        margin:0px;
    }
    .toolbar-title-md {
        font-size:36px !important;
        padding-top:16px !important;
        font-weight:normal !important;
        overflow:visible !important;
    }
    .toolbar-md {
        min-height: 112px;
        .toolbar-background {
            background-color: #019ae8 !important;
            background: #019ae8 !important;
        }
        ion-icon {
            display:block;
        }
        ion-icon:before {
            color: #FFFFFF !important;
        }
        .bar-button-menutoggle {
            padding-top:12px;
            padding-left:12px;
            text-align:left !important;
            .button-inner {
                display:block;
            }
        }
    }
    .header-note {
        position: absolute;
        bottom: 0px;
        margin: 0px;
        font-size: 10px;
        width: 100%;
        text-align: right;
        padding-bottom: 5px;
        padding-right: 8px;
        color: white;
    }
    .big-header-descriptor {
        display:none;
        position: absolute;
        top: 2px;
        font-size: 14px;
        text-transform:uppercase;
    }
}

Answer 1

您可以创建共享的自定义标头组件。

<ion-navbar>
  <button *ngIf="header_data.ismenu" ion-button icon-only menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <button *ngIf="header_data.ishome" class="algo-header-home-icon" ion-button icon-only (click)="homeClick()">
    <ion-icon class="ion-home" name="home"></ion-icon>
  </button>
  <ion-title class="header-title" [ngClass]="{'ishome-title': header_data.ishome,'ismeun-centre': !header_data.ishome}">
    {{header_data.title}}
  </ion-title>
</ion-navbar>

import { Component,Input } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../../pages/home/home';

@Component({
  selector: 'custom-header',
  templateUrl: 'custom-header.html'
})
export class CustomHeaderComponent {
  header_data: any;
  constructor(public navCtrl: NavController) {}
  @Input()
  set header(header_data: any) {
    this.header_data=header_data;
  }
  get header() {
    return this.header_data;
  }
  homeClick() {
    this.navCtrl.setRoot(HomePage);
  }
}

并在应用程序页面中使用相同的组件

<ion-header><custom-header [header]="header_data"></custom-header></ion-header>
 <ion-content padding class="page-home">
   <p>Home Page</p>
 </ion-content>

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  header_data:any;
  constructor(public navCtrl: NavController) {
    this.header_data={ismenu:true,ishome:false,title:"Home"};
  }
}

我们必须尽可能避免使用自定义 CSS 样式来提高性能。 您可以在 --prod 模式下构建应用程序以提高性能

参考：https://www.protectator.ch/post/optimizing-performance-of-an-ionic-3-application

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app.module';
import {enableProdMode} from "@angular/core";

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);