Ionic2 渐变隐藏导航栏|标题栏

Posted 2020-08-27 super_cj

废话少说 直接上代码....

//导入需要用到的命名空间 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">