Ionic 3 - Скрыть навигационную панель и вкладки при прокрутке вниз и показывать при прокрутке вверх - PullRequest
Новая
       7

Ionic 3 - Скрыть навигационную панель и вкладки при прокрутке вниз и показывать при прокрутке вверх

0 голосов
/ 17 мая 2018

Я работаю над Ionic App, хочу скрыть навигационную панель и вкладки при прокрутке вниз и показывать их при прокрутке вверх.Кто-нибудь знает, как это сделать?Пожалуйста помоги.Заранее спасибо.

1 Ответ

0 голосов
/ 18 мая 2018

очень наивная реализация:

  • добавьте переменную, которая будет вашим логическим флагом для состояния (показано / скрыто)
  • добавьте ссылку на детектор изменений в ваш компонент (каквам нужно изменить cdr этого логического значения для распространения пользовательского интерфейса)
  • связать свой верхний / нижний колонтитул с помощью директивы * ngIf

Примерно так: 

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage2 {

  headerVisible: boolean = false;

  constructor(
    public cdr: ChangeDetectorRef
  ) {
  }

  scrollState(event) {
    if (event.directionY == "up") {
      this.headerVisible = false;
    } else {
      this.headerVisible = true;
    }
    this.cdr.detectChanges();
  }

}

И в вашем шаблоне: 

<ion-header *ngIf="headerVisible">
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

Но, скорее всего, вместо * ng, если вы захотите изменить высоту верхнего / нижнего колонтитула, чтобы ваш общий шаблон работал лучше с полями.

Также обратите внимание, чтов идеале вы не хотите, чтобы событие прокрутки "спам", поэтому вам нужно реализовать правильный способ захвата состояния (вверх или вниз) без него (debounce / throttle it)

...