IONIC 4 прокручивается вверх при нажатии на кнопку табуляции - PullRequest
Новая
       14

IONIC 4 прокручивается вверх при нажатии на кнопку табуляции

1 голос
/ 06 ноября 2019

Мне нужно прокрутить вверх страницы, когда я нажимаю кнопку вкладки, и я уже на этой странице

Я пытался: 

 @ViewChild(IonContent,  { static: false }) private content: IonContent;

myMethod() {
 this.content.scrollToTop();
}

но это не работает, и я попытался поместить это в ioViewWillEnter на целевой странице, и все же это работает только в первый раз в ионном 4

я также попытался поместить его в событие ionTabsDidChangeионная вкладка, но это событие вызывается только при изменении вкладок

1 Ответ

0 голосов
/ 06 ноября 2019

Я думаю, что вы запросили сложную операцию, поскольку это не стандартный способ выполнения действий.

Обычно кнопка не делает ничего, что заставляет пользователя понять, что он уже находится на этой вкладке.

Я настроил демонстрационный проект и попробовал различные встроенные события, но в конечном итоге tab-button испускает событие click, и он достигает уровня shouldChange в компоненте tabs перед тем, как его уволитьдля того, чтобы быть той же самой вкладкой:

https://github.com/ionic-team/ionic/blob/master/core/src/components/tabs/tabs.tsx#L164

Что делает добавлением события нажатия на кнопку вкладки в tabs.page.html: 

<ion-tabs>
  <ion-tab-bar slot="bottom">
    {{ snip }}

    <ion-tab-button tab="tab2" (click)="tabButtonClicked('tab2')">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Tab Two</ion-label>
    </ion-tab-button>

    {{ snip }}
  </ion-tab-bar>

</ion-tabs>

Я думаю, чтоИспользуя этот обработчик кликов, вы берете текущую вкладку и отправляете свое собственное событие: 

tabButtonClicked(tabNumber: string) {
    if (tabNumber === this.selectTab) { 
        this.events.publish('tabs', tabNumber); 
    }
}

В этом руководстве показано, как использовать систему Ionic Events, которая позволяет передавать пользовательские события другим компонентам в системе:

https://alligator.io/ionic/events/

Таким образом, вы можете использовать это для генерации настраиваемого события «прокрутка вверх» и обработки его внутри вкладки. Затем используйте исходный код .scrollToTop() внутри этого пользовательского обработчика событий.

Например, на вкладке, на которой вы хотите прокрутить, добавьте: 

@ViewChild(IonContent, { static: false }) private content: IonContent; 

constructor(public events: Events) { 
}

ionViewWillEnter() {
    this.events.subscribe('tabs', tabNumber => {
        if (tabNumber === 'tab1') { 
            this.content.scrollToTop(); 
        } 
    });
}

ionViewDidLeave() {
    this.events.unsubscribe('tabs', () => {} );
}
...