CODEWITHSUNDEEP
javascriptcssionic-frameworkionic3refresher
KnowledgeSeeker
KnowledgeSeeker

Reputation: 1098

Ionic refresher pullingIcon shows up even at the most bottom of the page when scrolling up

I am using Ionic 3 and I used the ionic-refresher to reload and load some new data from an API provider when the page is refresh that is working fine.

However when I scroll down below and decided to scroll up back again. The refresher pulling icon always shop up even at the bottom or center part of the content which I don't want to happen.

I only want to shop up the pullingIcon at the most top part of the content when it reaches the ion-navbar or the header component.

<ion-content>

  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

</ion-content>

The code which I implemented is the same as the docs example with just different method when refreshed.

Is this an issue?

I also have the code inside of my content which is at the bottom of the ion-refresher ending tag. This is the code below:

<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">

Is it a conflict because of the ion-slides or just an issue?

The only css that I had modified is this below:

.refresher-pulling-icon, .refresher-refreshing-icon{
  color: red
}

.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
       stroke : red;
    }

But I don't think that this has involved or the cause of the issue.

Appreciate if someone could help. Thanks in advance.

Upvotes: 0

Views: 1015

Answers (0)

Related Questions