Прокрутка содержимого внизу не работает

Question

Я разрабатываю приложение в ионном режиме.когда страница загрузки scrollToBottom не работает.

Секция HTML

<ion-content #content>
</ion-content>

Секция TS

@ViewChild(Content) content: Content;

ionViewDidLoad() {
    console.log('ionViewDidLoad PersonalChatPage');
    this.content.scrollToBottom();
}

Answer 1

Проблема в том, что код scrollToBottom() может выполняться до полного обновления DOM.

Можно попробовать несколько решений, основанных на реакции на DOM / Template для выполнения прокрутки.

Первое решение

Лучшее, что я нашел, было в этой статье Джош Морони

Чтобы возобновить его: можно использовать Mutation Observer для выполнения прокрутки только тогда, когдасработало определенное событие DOM.

Вот некоторый код, чтобы проиллюстрировать это.

// To get Typescript completion for Ionic 4 use: 
// import { IonContent } from '@angular/core'
// @ViewChild(Content) contentArea: IonContent;


@ViewChild(Content) contentArea: Content;
// list in the template to observe
@ViewChild(List, {read: ElementRef}) chatList: ElementRef;

// MutationObserver doesn't need to be imported
private mutationObserver: MutationObserver;

ionViewDidLoad(){

    // Code to be executed on event
    this.mutationObserver = new MutationObserver((mutations) => {
        this.contentArea.scrollToBottom();
    });

    // the Element that will be Observed
    this.mutationObserver.observe(this.chatList.nativeElement, {
        childList: true
    });

}

Подробнее о Mutation Observer в Mozilla.Его совместимость с браузерами очень хорошая.

Второе решение

Я лично не пробовал, но в этом ответе можно найти еще одну очень интересную альтернативу mhartington изIonic Team.

Вот код:

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items; let last = last">
      {{ item }}
      {{ last ? callFunction() : '' }}
    </ion-item>
  </ion-list>
</ion-content>


export class Page2 {
  public items: any[] = [];
  @ViewChild(Content) content: Content
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams) {
    setTimeout(() => {
      for (let i = 0; i < 100; i++) {
        this.items[i] = i
      }
    }, 300)
  }
  callFunction(){
    this.content.scrollToBottom(0)
  }
}

Поэтому идея заключается в том, чтобы вызывать this.content.scrollToBottom() только после создания последнего элемента в шаблоне.Используя индекс, это дало бы возможность автоматически прокручивать любой из элементов, хотя в данный момент я не вижу смысла в этом.

Что касается аргумента, что нецелесообразно напрямую манипулировать DOMв Angular: манипуляций нет, просто реакция компонента на событие DOM ...

Answer 2

Добавление задержки решит вашу проблему.

ionViewDidLoad() {
    console.log('ionViewDidLoad PersonalChatPage');
    let that = this;
    setTimeout(()=>{that.content.scrollToBottom();},200); 
}

И еще одна вещь, поскольку ваш код имеет тег # content , как показано ниже:

<ion-content #content></ion-content>

Тогда выможно написать как:

@ViewChild('content') content: Content;