Ionic动态改变导航栏颜色 [英] Ionic change navbar color dynamically

问题描述

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

I have to change the color of the navbar of one page when scrolling a bit.

这里我们有一部分xml文件：

Here we have part of my xml file:

<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)">

我首先尝试使用点击事件更改它并且工作正常。

I tryed first by changing it using a click event and it worked fine.

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

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

And this is the ionScrollEnd listener, that does not work. The event is fired correctly, but the changes on toolbar_color are not taking any effect on the navbar.

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

我该怎么办？

谢谢：）

推荐答案

添加 @ViewChild （内容）内容：TS文件中的内容并订阅滚动结束事件。请参阅此链接以获取工作版本。另请参阅离子论坛讨论此问题

Add @ViewChild(Content) content: Content in the TS file and subscribe to scroll end event. refer this link for working version. Also see the ionic 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>

Update-1

1. 添加代码以在滚动时更改颜色


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


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

这篇关于Ionic动态改变导航栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！