Ionic 3 развернуть заголовок по клику - PullRequest
Новая
       22

Ionic 3 развернуть заголовок по клику

1 голос
/ 15 марта 2019

Я использую Ionic 3 и реализовал расширяемый заголовок на основе этого учебника от Джошморони.

Он отлично работает при расширении прокрутки: https://media.giphy.com/media/OSuVVWmVgvYI4e8QEu/giphy.gif

Моя проблема в том, что я хочу расширить заголовок по щелчку вместо прокрутки.Когда я нажимаю на кнопку меню, заголовок раскрывается.

Это мой код:

shrinking-сегмент-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>

Если кто-то знает, как обмануть расширяемый заголовок при нажатии, пожалуйста, помогите мне.Любой совет приветствуется.Спасибо.

1 Ответ

1 голос
/ 15 марта 2019

Вы можете просто создать метод для расширения заголовка до начальной высоты (хранится в this.headerHeight). Поэтому я добавил следующий код в класс ShrinkingSegmentHeader: 

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

Для демонстрации я добавил внутри HTML-кода ShrinkingSegmentHeader кнопку для вызова метода, упомянутого выше: 

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

Как уже упоминалось, кнопка предназначена только для демонстрации, вызов метода всякий раз, когда вы хотите расширить заголовок, будет более сложной задачей и зависит только от вас. Следующие вопросы могут быть полезны, в зависимости от вашего варианта использования:

Также обратите внимание, что Angle Renderer устарел. Вы должны использовать Renderer2 вместо.

...