Question

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

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

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

这是我的代码：

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>

如果有人知道如何诱骗点击时展开的标头，请帮助我。任何建议表示赞赏。谢谢。

Answer 1

您只需创建一个方法即可将标题扩展到初始高度（存储在this.headerHeight中）。因此，我在ShrinkingSegmentHeader类中添加了以下代码：

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>

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

还请注意，Angular renderer已过时。您应该改用Renderer2。

Ionic 3单击扩展标题

1 个答案: