Question

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

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

当我在包含所有消息的<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>

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

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

提前致谢！ :)

Answer 1

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

导入import string import random x = 0 itemlist = [] while x < 2000: newitem = ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(20)) if newitem not in itemlist: itemlist.append(newitem) x = x + 1 print newitem和ViewChild：

InfiniteScroll

然后为import { ViewChild } from '@angular/core'; import { InfiniteScroll } from 'ionic-angular';创建一个属性：

infiniteScroll

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

@ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;

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

Answer 2

反向无限滚动聊天功能对我来说很好。这就是我的代码看起来像

<强> HTML

<ion-infinite-scroll (ionInfinite)="doInfiniteChat($event)" position="top">
        <ion-infinite-scroll-content loadingText="Loading more chats...">
        </ion-infinite-scroll-content>
</ion-infinite-scroll>

你必须在 * ngFor

中反转你正在使用的数组

 <div *ngFor="let msg of msgArray.reverse()">

上面的代码工作正常。感谢

Answer 3

通过以下方式更新您的代码

<ion-infinite-scroll (ionInfinite)="scrolled($event)"
        threshold="10px"
        position="top">

到

<ion-infinite-scroll (ionInfinite)="scrolled($event)"
        threshold="10px"
        position="bottom">

Answer 4

要解决＃1，可以使用disabled组件的ion-infinite-scroll属性。如果为true，则不会占用任何空间。您可以确定分页内容何时结束，然后禁用ion-infinite-scroll。

<ion-infinite-scroll [disabled]="true"></ion-infinite-scroll>

要解决第二个问题，可以使用与上述相同的逻辑。在页面加载时，您可以禁用ion-infinite-scroll，并在滚动到底部事件后启用ion-infinite-scroll。

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

4 个答案: