Ionic 4 无限滚动初始滚动位置

Question

当用户一直向上或一直向下滚动时添加新项目时，我正在尝试制作双重无限滚动案例。

<ion-infinite-scroll (ionInfinite)="scrolledUp($event)" position="top">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

<ion-list>
    <ion-item *ngFor="let item of items">
         <!-- item content -->
    <ion-item>
</ion-list>

<ion-infinite-scroll (ionInfinite)="scrolledDown($event)"  position="bottom">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

问题是列表最初在底部打开。当然，我可以 scrollIntoView ionViewDidEnter 上的第一个项目，但它看起来不太好，会使用户感到困惑。

我注意到它是position=top负责底部初始位置的那个。

有没有办法设置 ion-infinite-scroll 的初始滚动位置，而不必显式地将列表滚动到顶部？

Answer 1

正如我最初怀疑的那样，如果位置设置为顶部，infinite scroll component 确实会强制滚动到底部。它出现在 componentDidLoad 方法中，如下所示：

 async componentDidLoad() {
    const contentEl = this.el.closest('ion-content');
    if (contentEl) {
      await contentEl.componentOnReady();
      this.scrollEl = await contentEl.getScrollElement();
    }
    this.thresholdChanged();
    this.disabledChanged();
    if (this.position === 'top') {
      writeTask(() => {
        if (this.scrollEl) {
          this.scrollEl.scrollTop = this.scrollEl.scrollHeight - this.scrollEl.clientHeight;
        }
      });
    }
  }

由于该组件无法提供干预此行为的方法，并且 without an option 无法扩展或以其他方式自定义默认模板组件，因此我采用了一种有点古怪的方式来实现所需的行为。

因此，您首先需要从视图中的ion-infinite-scroll 声明中删除position=top 部分，这样上述代码的滚动部分就不会触发。您还需要为 ion-infinite-scroll 提供一个名称，以便可以从您的页面 class.

中引用它

<ion-infinite-scroll #top (ionInfinite)="scrolledUp($event)">

然后在您的页面中引用上面的 #top。

  @ViewChild('top') topScroller;

然后在ionViewDidEnter生命周期钩子中，可以将滚动条的位置设置为top。

  setTimeout(() => {
    this.topScroller.position = 'top';
  }, 200);

一定是超时了，因为调用ionViewDidEnter时topScroller变量还没有赋值，下一个生命周期钩子是ionViewWillLeave，对我们的用处不大目的。

Ionic 4 无限滚动初始滚动位置

Ionic 4 infinite-scroll initial scroll position

ionic-framework

ionic4