Ionic4-实现导航栏下拉渐变

需要用到的属性：

• no-border //ion-header 去除边框
• transparent //ion-toolbar 透明背景 - 这个没用到
• fullscreen //ion-content 占全屏

• scrollEvents //ion-content 滚动标识

代码HTML

<ion-header no-border>
  <ion-toolbar transparent #header>
    <ion-buttons slot="start">
      <ion-button (click)="goBack()">
        <ion-icon name="arrow-back"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{title}}</ion-title>
  </ion-toolbar>
  <ion-button (click)="goBack()" class="cloneBtn" fill="clear" *ngIf="setContentTop">
    <ion-icon name="arrow-back"></ion-icon>
  </ion-button>
  <ion-title class="cloneTitle" *ngIf="setContentTop">{{title}}</ion-title>
</ion-header>

<ion-content fullscreen scrollEvents (ionScroll)="scrollEvent($event)" #contentView
  [ngClass]="{'content-clear': setContentTop}">
。。。
</ion-content>

JS

 scrollEvent(e) {
    console.log(this.header.el.style)
    if (this.setContentTop) {
      let opacity = (e.detail.scrollTop-80) / 80;//设置滚动距离80的时候导航栏出现
      this.header.el.style.opacity = opacity;
    }

  }