离子2/4无限滚动的向上.怪异的间距和怪异的行为

我在我的聊天应用程序中的最后一个功能之一，我试图无限地滚动到两个人之间创建的"第一个"消息，相似对于您使用的任何其他聊天应用程序，无论是Facebook，Skype，Slack等

我遇到的问题是几件事。

当我在包含所有消息的<ul>上方添加无限的滚动代码时，我会得到一个巨大的200px高度Whitespace(我认为可以考虑加载旋转器(。这是我的代码：

       <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>在页面加载上启动的最佳方法。我在这里缺少一些简单的东西吗？

预先感谢！:)

对于＃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，我不知道为什么会占用这么多空间，但是如果上述有效，它将被滚出页面，不会注意到。

求解＃1，您可以使用ion-infinite-scroll组件的disabled属性。如果是真的，它不会占用任何空间。您可以有一个逻辑，用于分页的内容结束，然后禁用ion-infinite-scroll。

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

和求解＃2，您可以使用上面的逻辑相同。在页面上，您可以禁用ion-infinite-scroll，然后在滚动到底部事件后，启用ion-infinite-scroll。

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

的样子

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()">

上述代码工作正常。谢谢

从

更新代码

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

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

相关内容

最新更新

热门标签：