Событие бесконечной прокрутки Ionic 3 по-прежнему происходит в верхней или центральной части страницы.
Я делаю приложение в Ionic 3, и я использовал слайды ion с ионной прокруткой внутри, чтобы отобразить весь мой контент или данные от запроса API к серверу. Событие бесконечной прокрутки, которое оно выполняет для загрузки большего количества данных, работает нормально.
Но раздражающая часть - всякий раз, когда я прокручиваю вверх или по центру, особенно в верхней части прокрутки. Событие по-прежнему срабатывает, что должно происходить только тогда, когда я прокручиваю до самой нижней части scroll
внутри slide
Я уже пробовал это альтернативное решение, но не могу решить свою проблему.
Вот код в моем HTML ниже.
<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)" *ngIf="!spinner">
<empty-list caption="No Content" *ngIf="errorShow || noPost"></empty-list>
<!--Explore-->
<ion-slide *ngIf="!preloader">
<ion-scroll #scrollWeb scrollY="true">
<!-- !!! Content inside here using ion-card and div !!!-->
<ion-infinite-scroll (ionInfinite)="loadMorePost($event)">
<ion-infinite-scroll-content
loadingSpinner="crescent"
></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
</ion-slide>
Я пытался получить значение оси Y прокрутки с помощью ViewChild
как это ниже:
<!-- Defined the property to access the native element-->
@ViewChild('scrollWeb') scrollWeb: Scroll;
Родной элемент:
<ion-scroll #scrollWeb scrollY="true">
и в моем файле TS я вызвал эту функцию в моем ionViewDidEnter()
ниже:
slideScrollTop() {
setTimeout(() => {
console.log(this.scrollWeb)
if (this.scrollWeb) {
// Fix issue for infinite scroll of loadMorePost function based on github issues when using infinite scroll inside a slide and scroll
this.scrollWeb.addScrollEventListener((ev) => {
if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
this.loadMorePost(null);
}
});
}
}, 1000)
}
и в моем loadMorePost()
метод, который является событием, которое будет срабатывать, когда (ionInfinite)
срабатывает.
loadMorePost(infiniteScroll) {
if (infiniteScroll !== null) {
console.log('Begin async operation');
setTimeout(() => {
// Do some async operation on API get request
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
}
Так что вызов API на сервере работает отлично. Но пользовательский интерфейс немного грязный, когда я пытаюсь прокручивать вверх и вниз. Я только хочу вызвать (ionInfinite)
событие, когда я нахожусь в самой нижней части страницы, чего я не могу достичь даже с помощью ссылки на альтернативное решение выше.
Может кто-нибудь пролить свет на меня?
Заранее спасибо.