Using ion-slides with ion-refresher issue

#1

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>
#2

is there a solution for this problem ?

#3

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;
}