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)
  }

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

底部的开始列表

1 个答案: