Search code examples
angular7ionic4refresher

ionic 4 pull to refresh text showing over content while pulling

Hi using ionic 4 / angular7

I want to inplement pull to refresh and i have done it this way:

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

and in controller

 ionRefresh(event) {
    console.log('Pull Event Triggered!');
    setTimeout(() => {
      console.log('Async operation has ended');

  //complete()  signify that the refreshing has completed and to close 
  the refresher
      event.target.complete();
    }, 2000);
  }
  ionPull(event){
    //Emitted while the user is pulling down the content and exposing the 
  refresher.
    console.log('ionPull Event Triggered!');
  }
  ionStart(event){
    //Emitted when the user begins to start pulling down.
    console.log('ionStart Event Triggered!');
  }

this works but it shows some weird effects. While pulling down the text pull to refresh hovers over the content also when closing the refresher the text refreshing stays shown for a second or 2. This all makes it look bad. How can i fix this?

I also had to add styles to the refresher otherwise the refresher had a black background with no text showing so i added this:

<style>
  ion-content {
    background-color: #efefef;
    color:#555;
  }
  ion-refresher {
    z-index:1;
  }

i have made a gif showing the behavior

This is what happens

Solution

  • i fixed it (thanks Paresh) is was because the background of the content was transparent. also had to set the z-index higher then the refreshher. For some reason no z-index on the refresher did not show text

    this is the fix:

    <ion-content style="background:#efefef;color:#555;z-index:1;">

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


  <div class="ion-padding" style="background:#fff;z-index:2">
    content here
  </div>