Trigger the Refresher (ion-refresher) Animation by Method (not by "pull to refresh")

Ionic Framework ionic-v3
1

Hey everyone,

I successfully implemented a Refresher (ion-refresher) and got it via a ViewChild to be able to call its methods on typescript-side. Now I’d really like to trigger the animation and loading process behind if the page loaded to give the user the feedback that it’s fetching updates by itself… but I couldn’t find the proper method to call. Currently I do this:

@ViewChild(Refresher) refresher: Refresher;

  ionViewDidEnter() {
      this.refresher._beginRefresh()
  }

  loadPosts(){
          this.blogProvider.getPostsFromBackend()
              .then(() => this.refresher.complete())
              .catch(err => console.log(err))
     
  }

It does work some 50% - it triggers the loadPost() method and animates the expansion of the space at the top. However the spinner animation and “Refreshing…” don’t show up.

Any ideas to get it workin’?

2

Hi there. Have you found the solution?

3

@milan_kappen @Dlamiman

Hi both,

I also use this.refresher._beginRefresh() since Ionic have parked the FR for a better way to manually trigger the refresh animation.

I had the same issue with the spinner not showing, but then realised that it was being obscured by the header bar in my application.

Popping in the following css helped me.

  ion-refresher:not([style]) {
    top: 150px;
  }

( I have a large header with ion-segment buttons included! But try using that and changing the px value).

Hope this helps.

4

Hi @RubyWh1

I am using iconic 6 and want to run refresher on clicking a button. Is it possible? If yes, how?