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的{{1}}函数scrollTo（仍在代码上）。
我尝试了ngx-infinite-scroller npm软件包，根本没有用。

我有两个问题

最重要的是：我怎么能迫使无限滚动从底部开始？
如何在加载消息时防止滚动条出现迷你“跳”效果？

如果我的问题不清楚，请随时帮助我进行改进。

Answer 1

您可以使用内容组件来处理代码中的滚动并使用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

您应该使用无限滚动。

只需将position属性设置为top，就可以按照您需要的方式工作。 https://ionicframework.com/docs/api/infinite-scroll

使用离子无限滚动从底部开始

2 个答案: