Как использовать 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)
})
}
Может кто-нибудь подскажет, как я могу отобразить дополнительные оставшиеся элементы при просмотре на большом экране?