Angular Ionic - 检测 <ion-content> 是否滚动至最大底部

Question

我正在用 Angular 和 ionic 编写一个信使。我想scrollToBottom在滚动到最大底部时触发该方法。因为如果有人滚动顶部查看旧消息，而合作伙伴正在发送任何消息，那么他不会每次都被踢到底部。

这是文档： https: //ionicframework.com/docs/api/content但我找不到任何可以帮助我解决这个问题的文档。

Answer 1

如果你想知道底部何时已经最大滚动，那么你需要执行类似以下代码的操作：

\n\n

我编写了一些示例代码来实现目标。

\n\n

注意：我在此解决方案中使用 Angular 9 和 Ionic 5。

\n\n

<ion-content\n  [scrollEvents]="true"\n  (ionScroll)="scrolling($event)"\n>\n  <ion-list>\n    <ion-item *ngFor="let item of items">\n      <ion-label>Pok\xc3\xa9mon Yellow</ion-label>\n    </ion-item>\n  </ion-list>\n</ion-content>\n\n

\n\n

  import { IonContent } from \'@ionic/angular\';\n\n  @ViewChild(IonContent) content: IonContent;\n\n  ngOnInit() {\n    // create a list of items to show the scroll\n    this.generateNumItems(100);\n    setTimeout(() => {\n      // after 2 secs then scroll to bottom\n      this.scrollToBottom();\n    }, 2000);\n  }\n\n  generateNumItems(number) {\n    for (let i = 0; i < number; i++) {\n      this.items.push(i);\n    }\n  }\n\n  scrolling(event: any) { // event has an interface but I don\'t need it\n    this.detectBottom();\n  }\n\n  scrollToBottom() {\n    this.content.scrollToBottom(500);\n  }\n\n  async detectBottom() {\n    const scrollElement = await this.content.getScrollElement(); // get scroll element\n   // calculate if max bottom was reached\n    if (\n      scrollElement.scrollTop ===\n      scrollElement.scrollHeight - scrollElement.clientHeight\n    ) {\n      console.info(\'max bottom was reached!\');\n    }\n  }\n

\n