Ionic framework 离子动态改变导航条颜色_Ionic Framework_Ionic3

Ionic framework 离子动态改变导航条颜色

ionic-framework

Ionic framework 离子动态改变导航条颜色,ionic-framework,ionic3,Ionic Framework,Ionic3,我必须改变一页导航栏的颜色，当滚动一点这里是我的xml文件的一部分： <ion-header no-border> <ion-navbar color="{{ toolbar_color }}"> <ion-title (click)="change()">{{userdata.Name}}</ion-title> </ion-navbar> </ion-header> <ion-content

我必须改变一页导航栏的颜色，当滚动一点

这里是我的xml文件的一部分：

<ion-header no-border>

  <ion-navbar color="{{ toolbar_color }}">
    <ion-title (click)="change()">{{userdata.Name}}</ion-title>
  </ion-navbar>

</ion-header>

<ion-content fullscreen class="container" (ionScrollEnd)="scrollHandler($event)">

这是ionScrollEnd的监听器，不起作用。事件已正确触发，但工具栏颜色上的更改不会对导航栏产生任何影响

scrollHandler(event) {
    if ( event.scrollTop > 100 ) {
      console.log("ScrollEvent --> "+JSON.stringify(event));
      this.toolbar_color = "light"
      // this.toolbar_change = true;
    } else {
      this.toolbar_color = "danger"
      // this.toolbar_change = false;
    }
}

我他妈的怎么能这么做

谢谢：）

在TS文件中添加

@ViewChild（Content）Content:Content

，并订阅滚动结束事件。有关详细信息，请参阅此链接。也可以看到离子

HTML文件

<ion-header>
  <ion-navbar [color]="toolbar_color">
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <div  *ngFor="let i of Arr(num).fill(1)">{{i}}</div>

</ion-content>

更新-1

添加了在滚动时更改颜色的代码

有时angular不会自动运行changeDetector。我们可以使用ChangeDetectorRef手动触发它。添加它是为了在滚动时检测更改

工作版本也会更新。请查看以上链接