Programmatically pull-down ion-refresher panel

ionic-v1
1

hi… first of all… beautiful framework… really… and looking at the source code of ionic directives has taught me so much already… great work guys…

my question is is there a way to trigger ion-refresher panel to pull-down itself? the API to force it to pull-up exists… $scope.$broadcast('scroll.refreshComplete')… i couldnt find something similar to force it to drop-down as well…

the reason why i need this is… my app has a side-bar… you can open the first item in the content pane and pull-down to start a request… the request can take time… but i dont wanna block the user with a loader… so the UI is still responsive and he can go to some other item… but if he comes back to the first item and the request is still in process, i want the ion-refresher to be rendered in a pulled-down state…

regards…

asim…

1 Like
2

Wondering about exactly the same…

3

Here is a workaround I just found:

4

A offical way to get this done would be nice.
Or is there a other correct way to handle this use case?

5

Got exactly the same question. I found a way by applying css:

  1. define an id for you ion-refresher

    <ion-refresher id=‘profile-refresher’…

  2. add an ng-class to your ion-content

    <ion-content ng-class=“initialLoading?‘profile-content’:’’”

  3. define a css rule

    .profile-content{
    transform: translate3d(0px, 60px, 0px);
    }

  4. add those lines to your controller

    // Show refreshin on startup
    $scope.initialLoading=1;
    var d = document.getElementById(“profile-refresher”);
    d.className = d.className.replace( /(?:^|\s)invisible(?!\S)/g , ‘’ )
    d.className += " active refreshing ";

    setTimeout(function(){
    $scope.$broadcast(‘scroll.refreshComplete’);
    $scope.initialLoading=0;
    },2000)

=> obviously, remove the setTimeout for a function that you’ll call on page load and fetch your data.

Hope this helps