實(shí)現(xiàn)效果

新建項(xiàng)目

$ ionic start myapp blank
$ cd myapp

生成自定義指令

$ ionic g directive elasticHeader

導(dǎo)入自定義指令

在 src/app/app.module.ts 中導(dǎo)入 ElasticHeaderDirective:

import { ElasticHeaderDirective } from '../directives/elastic-header/elastic-header';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ElasticHeaderDirective
  ],
  ...
})
export class AppModule {}

實(shí)現(xiàn)自定義指令的功能

修改 elastic-header.ts：

import { Directive, ElementRef, Input, Renderer } from '@angular/core';
import { Content } from "ionic-angular";

@Directive({
  selector: '[elastic-header]',
  host: {
    '(ionScroll)': 'onContentScroll($event)'
  }
})
export class ElasticHeaderDirective {
  @Input('elastic-header') header: HTMLElement;

  headerHeight: number;
  scrollContent: Content;

  constructor(public element: ElementRef, public renderer: Renderer) { }

  ngOnInit() {
    this.headerHeight = this.header.clientHeight;
    this.renderer.setElementStyle(this.header, 'webkitTransition', 'top 700ms');
    this.scrollContent = this.element.nativeElement.getElementsByClassName('scroll-content')[0];
    this.renderer.setElementStyle(this.scrollContent, 'webkitTransition', 'margin-top 700ms');
  }

  onContentScroll(event) {
    if (event.scrollTop > this.headerHeight) {
      this.renderer.setElementStyle(this.header, 'top', `-${this.headerHeight}px`);
      this.renderer.setElementStyle(this.scrollContent, 'margin-top', '0px');
    } else {
      this.renderer.setElementStyle(this.header, 'top', '0px');
      this.renderer.setElementStyle(this.scrollContent, 'margin-top', `${this.headerHeight}px`);
    }
  }

}

使用自定義指令

修改 home.html：

<ion-header #header>
  <ion-navbar>
    <ion-title>
      納蘭性德簡介
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding [elastic-header]="header">
  納蘭性德（1655-1685）原名成德，字容若，號(hào)楞伽山人，也有人稱納蘭容若，滿洲正黃旗，是清代最為著名的詞人之一，為武英殿大學(xué)士明珠長子。他的詩詞不但在清代詞壇享有很高的聲譽(yù)，在整個(gè)中國文學(xué)史上，也以“納蘭詞”在詞壇占有光采奪目的一席之地。性德少聰穎，讀書過目即能成誦，繼承滿人習(xí)武傳統(tǒng)，精于騎射。在書法、繪畫、音樂方面均有一定造詣?？滴跏迥辏ㄟM(jìn)士。授三等侍衛(wèi)，尋晉一等，武官正三品。
      
  <p>妻兩廣總督盧興祖之女盧氏，賜淑人，誥贈(zèng)一品夫人，婚后三年，妻子亡故，吳江葉元禮親為之撰墓志銘，繼娶官氏，賜淑人。妾顏氏，后納江南沈宛，著有《選夢(mèng)詞》“風(fēng)韻不減夫婿”，亡佚。納蘭性德死時(shí)，年僅三十一歲，“文人祚薄，哀動(dòng)天地”葬于京西皂莢屯。有三子四女。一女嫁與驍將年羹堯。</p>
      
  <p>納蘭性德于順治十一年（公元1655年1月19日）生于北京，其父是康熙時(shí)期權(quán)傾朝野的“相國”明珠，母親愛新覺羅氏為英親王阿濟(jì)格第五女，一品誥命夫人。而其家族納喇氏隸屬正黃旗，為清初滿族最顯赫的八大姓之一，即后世所稱的“葉赫那拉氏”。納蘭性德的曾祖父名金臺(tái)吉，為葉赫部貝勒，其妹孟古姐姐，于明萬歷十六年嫁努爾哈赤為妃，生皇子皇太極。其后納蘭家族與皇室的姻戚關(guān)系也非常緊密。因而可以說，他的一生注定是富貴榮華，繁花著錦的。也許是造化弄人，納蘭性德偏偏是“雖履盛處豐，抑然不自多。于世無所芬華，若戚戚于富貴而以貧賤為可安者。身在高門廣廈，常有山澤魚鳥之思”。</p>
      
  <p>納蘭性德自幼天資聰穎，讀書過目不忘，數(shù)歲時(shí)即習(xí)騎射，17歲入國子監(jiān)讀書，為國子監(jiān)祭酒徐文元賞識(shí)，推薦給其兄內(nèi)閣學(xué)士，禮部侍郎徐乾學(xué)。納蘭性德18歲參加順天府鄉(xiāng)試，考中舉人，19歲 準(zhǔn)備參加會(huì)試，但因病沒能參加殿試。而后數(shù)年中他更發(fā)奮研讀，并拜徐乾學(xué)為師。在名師的指導(dǎo)下，他在兩年中，主持編纂了一部1792卷編的儒學(xué)匯編—《通志堂經(jīng)解》，受到皇上的賞識(shí)，也為今后發(fā)展打下了基礎(chǔ)。他又把熟讀經(jīng)史過程中的見聞和學(xué)友傳述記錄整理成文，用三四年時(shí)間，編成四卷集《淥水亭雜識(shí)》，其中包含歷史、地理、天文、歷算、佛學(xué)、音樂、文學(xué)、考證等方面知識(shí)。表現(xiàn)出他相當(dāng)廣博的學(xué)識(shí)基礎(chǔ)和各方面的意趣愛好。1674年，與妻子盧氏結(jié)婚，康熙十六年盧氏因難產(chǎn)去世，納蘭的悼亡之音破空而起，成為《飲水詞》中撥地而起的高峰。后人不能超越，連他自己也無法超越。北宋以來，一人而已?！倍砬逶~人況周頤也在《蕙風(fēng)詞話》中譽(yù)其為“國初第一詞手”。 [3]  王國維在《人間詞話》中評(píng)價(jià)納蘭“以自然之眼觀物，以自然之舌言情。此由初入中原，未染漢人風(fēng)氣，故能真切如此?！?lt;/p>
</ion-content>