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