Ionic 3 在点击时展开 header

Question

我正在使用 Ionic 3，并基于来自 Joshmorony 的 tutorial 实现了可扩展 Header。

在滚动时扩展时效果很好： https://media.giphy.com/media/OSuVVWmVgvYI4e8QEu/giphy.gif

我的问题是我想在单击而不是滚动时展开 header。当我单击菜单按钮时，header 展开。

这是我的代码：

shrinking-segment-header.ts

  @Input('scrollArea') scrollArea: any;
  @Input('headerHeight') headerHeight: number;

  newHeaderHeight: any;

  ...

  ngAfterViewInit() {
    this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');
    this.scrollArea.ionScroll.subscribe((ev) => {
      this.resizeHeader(ev);
    });
  }

  resizeHeader(ev) {
    ev.domWrite(() => {
      this.newHeaderHeight = this.headerHeight - ev.scrollTop;
      if (this.newHeaderHeight < 0) {
        this.newHeaderHeight = 0;
      }
      this.renderer.setElementStyle(this.element.nativeElement, 'height', this.newHeaderHeight + 'px');
    });
  }

我这样称呼组件：

dashboard.ts

<shrinking-segment-header [scrollArea]="myContent" headerHeight="190">
    {my content here}
<shrinking-segment-header>

如果有人知道如何在点击时欺骗可扩展 header，请帮助我。任何建议表示赞赏。谢谢。

Answer 1

您可以简单地创建一个方法来将您的 header 扩展到初始高度（存储在 this.headerHeight 中）。所以我将以下代码添加到 ShrinkingSegmentHeader class:

expandHeader() {
    this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px');
}

为了演示，我在 ShrinkingSegmentHeader HTML 中添加了一个按钮来调用上面提到的方法：

<ng-content></ng-content>
<button ion-button icon-only (click)="expandHeader()">
  <ion-icon name="beer"></ion-icon>
</button>

如前所述，该按钮仅用于演示，当您希望 header 展开时调用该方法将是比较棘手的部分，由您决定。根据您的用例，以下问题可能会有所帮助：

另请注意 Angular renderer is deprecated. You should use Renderer2 而不是。

Ionic 3 在点击时展开 header

Ionic 3 expand header on click

html

css

typescript

ionic-framework

angular5