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

Question

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

我遇到的问题是几件事。

1. 当我在<ul>容纳所有消息的上方添加无限滚动代码时，会得到一个200px高的空白（我认为这是加载微调器的原因）。这是我的代码：

          <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>
   

2. 我的聊天设置只捕获特定会话的前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，我不知道为什么它占用了这么多空间，但是如果上面的方法有效，它将被滚动到页面之外并且不会被注意到。