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">