在底部开始列表

Question

我正在使用离子2。我有一个项目列表：

this.firelist = this.dataService.findMessages(this.chatItem).map(items => {
  this.updateReadMessages(items);
  return items.reverse();
});

列表中显示：

<ion-content padding class="messages-page-content">
  <ion-list class="message-list">
    <ion-item class="message-item" *ngFor="let item of firelist | async">
        ....

这有效，但是如您所见，我有一个反向列表。因此，最新项目在底部。结果，我想从底部开始显示。

我尝试过：

window.setTimeout(()=> {this.content.scrollToBottom();}, 2000);

这有效，但是滚动有一个延迟，并且从视觉上看，滚动看起来不像列表可以在底部开始，而不必滚动。

这是可能的吗？

谢谢

Answer 1

我怀疑您会为此找到一个非常优雅的解决方案，但是您可以尝试以下内容：

尝试使用 ionViewWillEnter ：

  ionViewWillEnter() {
    this.content.scrollToBottom(0)
  }

---

您也可以尝试绑定到ngFor的最后一项，然后在渲染最后一项时发射滚动。类似的东西：

<ion-item class="message-item" *ngFor="let item of firelist | async; let last = last">
    {{ item }}
    {{ last ? doScroll() : '' }}
</ion-item>

在您的组件中：

export class somePage{
  ...
  constructor(...) {
    setTimeout(() => {
      for (let i = 0; i < 100; i++) {
        this.items[i] = i
      }
    }, 300)
  }
  doScroll(){
    this.content.scrollToBottom(0)
  }
}