离子框架 – 对于聊天应用程序,Ionic 2/4 Infinite Scroll向上…而不是向下.奇怪的间距和奇怪的行为

2023年3月20日 388次阅读

我正在使用我的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>的最佳方法.从页面加载中触发.这里有什么简单的东西吗？

提前致谢！ 🙂

最佳答案 对于#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,我不知道为什么占用这么多空间,但如果上述工作,它将在页面上滚动并且不会被注意到.

点赞