Ionic2 漸變隱藏導航欄|標題欄

廢話少說 直接上代碼....

//導入須要用到的命名空間 ViewChild,Content

import { Component, ViewChild } from '@angular/core';
import { NavController, ModalController, ToastController, Content } from 'ionic-angular';

@Component({
  selector: 'home',
  templateUrl: 'home.html',
})
export class HomePage {
  @ViewChild(Content) content: Content;　　//獲取界面Content的實例對象
　//獲取滑動的TOP值,並在200px時使標題欄達到透明
  onPageScroll(event) {
    let position = event.target.scrollTop;//取滑動TOP值  
    this.transrate = 2 - position / 100;
    document.getElementById("home_title").style.opacity = this.transrate.toString();　　

    //  this.content.resize();
    console.log(position);
  }
　//界面初始化時註冊界面滑動事件
  ngAfterViewInit() {
    this.content.addScrollListener(this.onPageScroll);
  }
}//界面代碼  給標題欄加個ID便可<ion-header style="opacity:0" id="home_title">