Using ion-slides with ion-refresher -Ionic-

Question

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-content>
    <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 ?

Answer 1

use the enabled tag to enable and disable the ion refresher.

<ion-refresher enabled={{pullToRefresh}}
              (ionRefresh)="doRefresh($event);">
    <ion-refresher-content 
      pullingText="Pull to refresh"
      pullingIcon="arrow-up"
      refreshingSpinner="crescent">

   </ion-refresher-content>
</ion-refresher>

In your HTML, you will need to check the index of the slide using the ionSlideDidChange event as shown below:

           <ion-slides  (ionSlideDidChange)="slideChanged()">

In your TS file implement the slideChanged method to check the current index of your slide and enable/disable the pullTorefresh field as shown below and ofcourse to use the getActiveIndex() on the slides, you would need to import the ViewChild component and declare your slides as a ViewChild.

import { Component, ViewChild, Input } from '@angular/core';

    export class Myclass {
      @ViewChild(Slides) slides: Slides;
      public pullToRefresh: boolean;

        ....
   slideChanged() {
    let currentIndex = this.slides.getActiveIndex();
    this.pullToRefresh = (currentIndex == 0) ? true : false;
         }
    }

Answer 2

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

Answer 3

You will have to have a refresher per slide:

<ion-content>
  <ion-slides>
    <ion-slide>
      <ion-content padding>
        <ion-refresher (ionRefresh)="doRefresh($event)">
          <ion-refresher-content
            pullingIcon="ios-refresh"
            pullingText="Pull to refresh"
            refreshingSpinner="ios"
            refreshingText="Loading...">
          </ion-refresher-content>
        </ion-refresher>
        <!--put long text--> 
      </ion-content>
    </ion-slide>
    <ion-slide>
      <ion-content padding>
        <ion-refresher (ionRefresh)="doRefresh($event)">
          <ion-refresher-content
            pullingIcon="ios-refresh"
            pullingText="Pull to refresh"
            refreshingSpinner="ios"
            refreshingText="Loading...">
          </ion-refresher-content>
        </ion-refresher>
        <!--put long text--> 
      </ion-content>
    </ion-slide>
    <ion-slide>
      <ion-content padding>
        <ion-refresher (ionRefresh)="doRefresh($event)">
          <ion-refresher-content
            pullingIcon="ios-refresh"
            pullingText="Pull to refresh"
            refreshingSpinner="ios"
            refreshingText="Loading...">
          </ion-refresher-content>
        </ion-refresher>
        <!--put long text--> 
      </ion-content>
    </ion-slide>
  </ion-slides>
</ion-content>