Как использовать ion-infinite-scroll на большом экране в приложении Ionic 5?

Я пытаюсь добавить 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)
      })
  }

Может кто-нибудь подскажет, как я могу отобразить дополнительные оставшиеся элементы при просмотре на большом экране?

0 ответов

Другие вопросы по тегам