Используйте ion-infinite-scroll, чтобы начать снизу

Question

Я делаю фид сообщений и хочу, чтобы мои пользователи могли прокручивать вверх, чтобы увидеть их сообщения.

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

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

messaging-interface.page.html

<ion-header>
  <custom-toolbar class="menu-bar" [title]=chatRoomType>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      {{chatRoomType}}
    </ion-title>
  </custom-toolbar>
</ion-header>

<ion-content class="message-interface">
  <ion-infinite-scroll position="top" (ionInfinite)="loadMoreMessages($event)" id="scroller">
    <ion-infinite-scroll-content loadingSpinner="circles" (change)="scrollTop($event)" id="scrollerContent">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

  <ion-grid class="message-grid" id="msgGrid">
    <ion-col class="message-grid" size="12">
      <app-message-bubble *ngFor="let messageAct of displayedMessages.reverse()" [messageModel]="messageAct"></app-message-bubble>
    </ion-col>

  </ion-grid>
</ion-content>

<ion-footer>
  <app-message-bar (sendButtonClicked)="onMessageSent($event)"></app-message-bar>
</ion-footer>

messaging-interface.page.ts

import { Component, OnInit, ViewChild } from '@angular/core'
import { ChatMessage } from "../ChatMessage.model"
import { ActivatedRoute } from '@angular/router';

import { ChatroomResolver } from "../chatroom-service/i-chatroom-service"
import { MockMessageService } from "../message-service/mock-message.service"

import * as moment from 'moment';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'app-messaging-interface',
  templateUrl: './messaging-interface.page.html',
  styleUrls: ['./messaging-interface.page.scss'],
})
export class MessagingInterfacePage implements OnInit {
  public displayedMessages: Array<ChatMessage>;

  private chatRoomResolver: ChatroomResolver;
  private gatherer: MockMessageService;
  private actualRoute: ActivatedRoute;
  private chatRoomId: string;
  private chatRoomType: string;

  @ViewChild(IonInfiniteScroll) scroller: IonInfiniteScroll;

  constructor(gatherer: MockMessageService, actualRoute: ActivatedRoute, chatRoomResolver: ChatroomResolver) {
    this.gatherer = gatherer;
    this.chatRoomResolver = chatRoomResolver;
    this.actualRoute = actualRoute;
    this.displayedMessages = new Array<ChatMessage>();
  }

  ngOnInit() {
    this.chatRoomType = this.actualRoute.snapshot.paramMap.get("type");
    let matchId: string = this.actualRoute.snapshot.paramMap.get("matchId");
    this.chatRoomId = this.chatRoomResolver.getAssociatedChatRoom(this.chatRoomType, matchId);
    console.log(this.chatRoomType + " " + matchId + " " + this.chatRoomId);
  }

  ngAfterViewInit() {
    console.log("PostInit");
    let msgGrid = <HTMLElement> document.getElementById("msgGrid");
    msgGrid.scrollIntoView(false);
  }

  ionViewWillEnter() {
    this.displayedMessages = new Array<ChatMessage>();
    this.gatherer.resetGatherer();
    this.gatherer.loadMessages(10).subscribe(messages =>
      this.displayedMessages = messages);
  }

  onMessageSent(sent: string) {
    let sentMessage = new ChatMessage(sent, "envoyeur", moment(), false);
    this.displayedMessages.push(sentMessage);
  }

  loadMoreMessages(event: Event) {
    let target = <HTMLIonInfiniteScrollElement> event.target;
    this.gatherer.loadMessages(10).subscribe(messages => {
      for (let msg of messages)
        this.displayedMessages.push(msg);
        target.complete();
    });
  }

  scrollTop(event: Event) {
    console.log("Scroll top");
    let target = <HTMLIonInfiniteScrollElement> event.target;
    target.scrollTo(0, (<HTMLElement> target.firstChild.lastChild).offsetTop);
  }
}

Решения, которые я пытался

• Я пытался использовать функцию HTMLElement scrollTo, scrollToView (все еще накод).
• Я пробовал пакет ngx-infinite-scroller npm, совсем не работал.

У меня два вопроса

1. Самое важное: как я могу заставить мой бесконечный скроллер запускаться снизу?

2. Как я могу предотвратитьмой скроллер, чтобы при загрузке сообщений был мини-эффект «прыжка»?

Если мой вопрос кажется неясным, не стесняйтесь помочь мне улучшить его.

Answer 1

Вы можете использовать компонент Content для обработки прокрутки в коде и использовать scrollToTop()

Для получения дополнительной информации см. https://ionicframework.com/docs/api/content#scrollToTop

import { Component, ViewChild } from '@angular/core';
import { Content } from 'ionic-angular';

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

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

Answer 2

Вы должны использовать бесконечный свиток.

Просто установите атрибут позиции top, чтобы он работал так, как вам нужно. https://ionicframework.com/docs/api/infinite-scroll