ionic-framework - 如何在 Ionic 5 应用程序的大屏幕上使用 ion-infinite-scroll？

Question

我正在尝试将ion-infinite-scroll添加到我的 Ionic 5 应用程序中。

当我在小屏幕设备上查看它时，它工作正常。即，如果我尝试在手机上向下滚动，则会显示新项目。

但是，如果我在更大的屏幕（即桌面显示器）上查看它，则只会显示原始项目列表，并且我无法看到完整的项目列表。

以下是它当前在桌面上的显示方式：

这是我的 HTML：

<ion-card *ngFor="let post of posts">
    <ion-item>
      {{ post.data().text }}
    </ion-item>
</ion-card>

<ion-infinite-scroll threshold="100px" (ionInfinite)="loadMorePosts($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

这是我的打字稿：

    ngOnInit() {
    this.getPosts();
  }

  getPosts() {
    firebase.firestore().collection('posts').orderBy('created', 'desc').limit
      (this.pageSize).get()
      .then((docs) => {
        docs.forEach((doc) => {
          this.posts.push(doc);
        })
        this.cursor = this.posts[this.posts.length - 1];
        console.log(this.posts)
      }).catch((err) => {
        console.log(err)
      })
  }

  loadMorePosts(event) {
    firebase.firestore().collection('posts').orderBy('created', 'desc').startAfter
      (this.cursor).limit(this.pageSize).get()
      .then((docs) => {
        docs.forEach((doc) => {
          this.posts.push(doc);
        })
        console.log(this.posts)
        if (docs.size < this.pageSize) {
          // All documents have been loaded
          event.target.disabled = true;
        } else {
          event.target.complete();
          this.cursor = this.posts[this.posts.length - 1];
        }
      }).catch((err) => {
        console.log(err)
      })
  }

有人可以告诉我在大屏幕上查看时如何显示额外的剩余项目吗？

标签： ionic-frameworkion-infinite-scroll