ionic-framework - Ionic 2/4 Infinite Scroll 向上...而不是向下，用于聊天应用程序。奇怪的间距和奇怪的行为

Question

我正在使用 Ionic 应用程序中聊天应用程序的最后一项功能，我试图无限滚动到两个人之间创建的“第一条”消息，类似于您使用过的任何其他聊天应用程序，它 Facebook、Skype、Slack 等。

我遇到的问题是一些事情。

当我在 <ul> 上方添加无限滚动代码时包含所有消息，我得到了一个巨大的 200 像素高度的空白(我认为可以考虑加载微调器)。这是我的代码:

       <ion-infinite-scroll (ionInfinite)="scrolled($event)"
        threshold="10px"
        position="top">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
      <ul>
        <li *ngFor="let message of messages; let i = index">
        ... other code to build the message
        </li>
      </ul>

我的聊天设置只抓取特定对话的前 10 条消息，想法是一旦它成为“顶部”无限滚动区域，它就会查询接下来的 10 条等等。问题是当聊天加载时，在滚动条向下滚动到屏幕底部以显示发送的最后一条消息之前有一个短暂的停顿。然而，在那短暂的时刻，滚动条已经在页面顶部，这似乎表明 <ion-infinite-scroll>触发 scrolled()功能。

有没有其他人遇到过这样的事情？一旦页面呈现，消息就会异步加载，所以我试图找出防止 <ion-infinite-scroll> 的最佳方法。从页面加载触发。我在这里遗漏了一些简单的东西吗？

提前致谢! :)

Answer 1

对于#2，您可以在加载第一批聊天时禁用滚动。

进口 ViewChild和 InfiniteScroll :

import { ViewChild } from '@angular/core';
import { InfiniteScroll } from 'ionic-angular';

然后为 infiniteScroll 创建一个属性:

@ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;

然后禁用它，加载你的东西，滚动，然后重新启用:

ionViewDidLoad(): void {
  // Disable to give time for loading & scrolling
  this.infiniteScroll.enable(false);

  loadFirstTenChats().then(() => {
    // Fiddle with the timing depending on what you are doing.

    // If you have footers or other dynamic content to worry about.
    setTimeout( () => this.content.resize(), 100);

    // Scroll to the bottom once the size has been calculated:
    setTimeout( () => this.content.scrollToBottom(100), 200);

    // The scroll above has to be finished before enabling or
    // else the IS might think it needs to load the next batch.
    setTimeout( () => this.infiniteScroll.enable(true), 1000);
  });
}

对于#1，我不知道为什么它占用了这么多空间，但是如果上述方法有效，它将被滚动到页面之外并且不会被注意到。