原本打算在Ionic3的<ion-content>中使用ionScroll事件改變<ion-header>的樣式，但是事件出發(fā)了樣式卻沒變。但是如果我在header上添加一個按鈕，點(diǎn)擊一下按鈕樣式就變了。

相關(guān)代碼

HTML

<ion-header [ngClass]="{'transparent-header': transparentHeader}">
  <ion-navbar color="light">
    <ion-title></ion-title>
    <ion-buttons end>
      <button icon-button (click)="goToEdit()">編輯</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content (ionScroll)="scrollEvent($event)"></ion-content>

TypeScript

transparentHeader: boolean = true;

scrollEvent(ionContent) {
  let opacity = 1 - (150 - ionContent.scrollTop) / 150;
  this.transparentHeader =  opacity >= 1 ? false : true;
}

goToEdit() {
  console.log('Go to edit.')
}

原本期望頁面向下滑動一定距離，header的transparent-header樣式就會自動移除，但現(xiàn)在必須要向下滑動以后，點(diǎn)一下編輯按鈕才能移除，而編輯按鈕里面只有一句控制臺輸出的語句。

圖片

沒有向下滑動的效果如下圖：

向下滑動但是樣式?jīng)]有改變的效果如下圖：

點(diǎn)擊按鈕以后的效果如下圖：