Question

滚动时，我必须更改一页导航栏的颜色。

这里我们有一部分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)">

我首先尝试使用点击事件进行更改，但效果很好。

change() {
    if ( this.toolbar_color == "danger" ) {
      this.toolbar_color = "light"
    } else {
      this.toolbar_color = "danger"
    }
}

这是ionScrollEnd监听器，但不起作用。事件被正确触发，但toolbar_color上的更改对导航栏没有任何影响。

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;
    }
}

我该怎么办？

谢谢：）

Answer 1

在TS文件中添加@ViewChild(Content) content: Content并订阅滚动结束事件。请参阅working version的此链接。另请参阅离子forum discussion on this issue

import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
import { NavController, Content } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content: Content;
  Arr = Array; //Array type captured in a variable
  num:number = 1000;
  toolbar_color: string;


  constructor(public navCtrl: NavController, public ref : ChangeDetectorRef) {
    this.toolbar_color="secondary";
  }

  changeColor(){
    this.toolbar_color="primary";
    this.ref.detectChanges();
  }

  ionViewDidLoad() {
    //this.content.enableJsScroll();
    this.content.ionScrollEnd.subscribe(() => {
        this.changeColor();
    });
}

}

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手动触发它。添加它以在滚动时检测更改。
工作版本也已更新。请查看以上链接

离子动态改变导航栏颜色

1 个答案: