javascript - 底部开始列表

Question

我正在使用 Ionic 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)
  }

<小时/>

您还可以尝试绑定(bind)到 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)
  }
}