Ionic 3 自定义指令实现 Elastic Header

实现效果

新建项目

$ ionic start myapp blank
$ cd myapp

生成自定义指令

$ ionic g directive elasticHeader

导入自定义指令

在 src/app/app.module.ts 中导入 ElasticHeaderDirective:

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

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

实现自定义指令的功能

修改 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）原名成德，字容若，号楞伽山人，也有人称纳兰容若，满洲正黄旗，是清代最为著名的词人之一，为武英殿大学士明珠长子。他的诗词不但在清代词坛享有很高的声誉，在整个中国文学史上，也以“纳兰词”在词坛占有光采夺目的一席之地。性德少聪颖，读书过目即能成诵，继承满人习武传统，精于骑射。在书法、绘画、音乐方面均有一定造诣。康熙十五年（进士。授三等侍卫，寻晋一等，武官正三品。
      
  <p>妻两广总督卢兴祖之女卢氏，赐淑人，诰赠一品夫人，婚后三年，妻子亡故，吴江叶元礼亲为之撰墓志铭，继娶官氏，赐淑人。妾颜氏，后纳江南沈宛，著有《选梦词》“风韵不减夫婿”，亡佚。纳兰性德死时，年仅三十一岁，“文人祚薄，哀动天地”葬于京西皂荚屯。有三子四女。一女嫁与骁将年羹尧。</p>
      
  <p>纳兰性德于顺治十一年（公元1655年1月19日）生于北京，其父是康熙时期权倾朝野的“相国”明珠，母亲爱新觉罗氏为英亲王阿济格第五女，一品诰命夫人。而其家族纳喇氏隶属正黄旗，为清初满族最显赫的八大姓之一，即后世所称的“叶赫那拉氏”。纳兰性德的曾祖父名金台吉，为叶赫部贝勒，其妹孟古姐姐，于明万历十六年嫁努尔哈赤为妃，生皇子皇太极。其后纳兰家族与皇室的姻戚关系也非常紧密。因而可以说，他的一生注定是富贵荣华，繁花著锦的。也许是造化弄人，纳兰性德偏偏是“虽履盛处丰，抑然不自多。于世无所芬华，若戚戚于富贵而以贫贱为可安者。身在高门广厦，常有山泽鱼鸟之思”。</p>
      
  <p>纳兰性德自幼天资聪颖，读书过目不忘，数岁时即习骑射，17岁入国子监读书，为国子监祭酒徐文元赏识，推荐给其兄内阁学士，礼部侍郎徐乾学。纳兰性德18岁参加顺天府乡试，考中举人，19岁 准备参加会试，但因病没能参加殿试。而后数年中他更发奋研读，并拜徐乾学为师。在名师的指导下，他在两年中，主持编纂了一部1792卷编的儒学汇编—《通志堂经解》，受到皇上的赏识，也为今后发展打下了基础。他又把熟读经史过程中的见闻和学友传述记录整理成文，用三四年时间，编成四卷集《渌水亭杂识》，其中包含历史、地理、天文、历算、佛学、音乐、文学、考证等方面知识。表现出他相当广博的学识基础和各方面的意趣爱好。1674年，与妻子卢氏结婚，康熙十六年卢氏因难产去世，纳兰的悼亡之音破空而起，成为《饮水词》中拨地而起的高峰。后人不能超越，连他自己也无法超越。北宋以来，一人而已。”而晚清词人况周颐也在《蕙风词话》中誉其为“国初第一词手”。 [3]  王国维在《人间词话》中评价纳兰“以自然之眼观物，以自然之舌言情。此由初入中原，未染汉人风气，故能真切如此。”</p>
</ion-content>