I need to make 3 slides using ion-slides component after adding ion-refresher component to my page
the ion-refresher always fired when pulling up at any position in the page (middle,bottom) not only on top of the page.
can someone help my to make ion-refresher only fired on top of the page
this is my code
<ion-refresher (ionRefresh)="doRefresh($event);">
<ion-refresher-content
pullingText="Pull to refresh"
pullingIcon="arrow-up"
refreshingSpinner="crescent">
</ion-refresher-content>
</ion-refresher>
<ion-slides >
<ion-slide>
<!--put long text-->
</ion-slide>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slides>
</ion-content>
is there a solution for this problem ?
You will have to control the ion-refresher being enabled based on if the ion-slide scrollTop is less than 10. This way you will be restricting its enabled state and it won’t be triggered with scroll up inside the ion-slide or ion-scroll and scroll position will be retained in each slide.
Code Sample below -
<ion-refresher [enabled]=“isRefresherEnabled()”(ionRefresh)=“doRefresh($event);”>
</ion-refresher-content>
</ion-refresher>
<ion-slides>
<ion-slide *ngFor="let slide of slides;let i = index;">
<ion-scroll class="y-scroll-custom" scrollY="true" #myScroll>
<!--put long text-->
</ion-scroll>
</ion-slide>
</ion-slides>
</ion-content>
in your corresponding *.ts file -
import { ViewChildren, QueryList } from '@angular/core';
import { Slides} from 'ionic-angular';
@ViewChild('mySlider') slider: Slides;
@ViewChildren('myScroll') components:QueryList<Scroll>;
isRefresherEnabled() {
if (this.slider) {
const activeSlideIdx = this.slider.getActiveIndex();
if (this.components && this.components['_results']) {
if (this.components['_results'][activeSlideIdx]) {
if (this.components['_results'][activeSlideIdx]['_scrollContent']) {
if (this.components['_results'][activeSlideIdx]['_scrollContent'].nativeElement.scrollTop <= 10) {
return true;
}
}
}
}
}
return false;
}