What way can that code trigger animation on ion-refresher?


#15

Could I click cell trigger pull-to-refresh?


#16

Yeah, but that does kind of defeat the purpose.


#17

But,this way is easy be problem!

Whether can don’t creat new element , only on pull-to-refresh(ion-refresher) triggered?


#18

Then you can do this.

  <ion-refresher ng-if="!show.icon" 
                 on-refresh="doRefresh()"
                 pulling-text="Pull to refresh..."
                 refreshing-text="Refreshing!"
                 refreshing-icon="ion-loading-c">

  </ion-refresher>

#19

thank you, I’ve tested. I feel such an interactive way or not. I think I need to change the kind of interaction!


#21

This would actually be super helpful. Whenever a user loads my page for the first time, I need to hit the API and pull in my list. I would love to display a loading spinner while that refresh happens.

Then, later, I also want users to be able to manually refresh the list with a pull-to-refresh. This should also display the loading spinner.

Currently, I need 2 separate loading spinners in order to achieve this, because I cannot manually trigger pull-to-refresh to display. Yes, I can use the same function in the controller to make the actual API call, but I need two spinners in my template for this to work! Wouldn’t it be nice if I could just call $ionRefresher.pull() on first page load, and have it take care of everything?


#22

I was poking around looking at how the refresher works and came across a function called triggerPullToRefresh. It looks like they are working on this feature but it didn’t quite work for me. So I did some more poking around and came up with a solution that worked for me:

angular.module('YourApp').service('utilities', function() {

    this.triggerScrollViewPullToRefresh = function (scrollView) {
        scrollView.__publish(
            scrollView.__scrollLeft, -scrollView.__refreshHeight,
            scrollView.__zoomLevel, true);

        var d = new Date();

        scrollView.refreshStartTime = d.getTime();

        scrollView.__refreshActive = true;
        scrollView.__refreshHidden = false;
        if (scrollView.__refreshShow) {
            scrollView.__refreshShow();
        }
        if (scrollView.__refreshActivate) {
            scrollView.__refreshActivate();
        }
        if (scrollView.__refreshStart) {
            scrollView.__refreshStart();
        }
    }
});

Just call that function passing in your scroll view and it should trigger the display of the refresher. Use the normal event to dismiss it. Keep in mind this will also trigger your onPulling and onRefresh callbacks. Also keep in mind this is using private variables and functions that may change and break this in the future. I suspect at some point they will fix the triggerPullToRefresh though.


#23

Hi there cpomer, I am trying to implement this but I am unclear what you mean by “pass in your scroll view.” I tried using the delegate-handle string and that did not work. Could you kindly clarify?


#24

Hi Monir,

So to use my code above you would do something like this:

angular.module('YourApp').controller('YourController',
  function($scope, $ionicScrollDelegate, utilities) {
    $scope.someFunc = function() {
      // scrollerHandle should be the delegate-handle set on the scrollview
      $scope.scrollDelegate = $ionicScrollDelegate.$getByHandle('scrollerHandle');
      utilities.triggerScrollViewPullToRefresh($scope.scrollDelegate.getScrollView());
    };
  });

Calling $scope.someFunc() should tigger the pull-to-refresh functionality on your scrollview that has a handle of ‘scrollerHandle’.


#25

@cpomer : You have a working demo of this somewhere? I’m trying to get it to work with no luck.


#26

@cpomer : Never mind. I got it working. You’re a genius!

I’ll post a demo when I can get a chance.


#27

@cpomer : I’ve got a working sample up now. Thanks so much for this trick.

https://calendee.com/2015/04/25/trigger-pull-to-refresh-in-ionic-framework-apps/


#28

The code @cpomer put up only works with JS scrolling for me but not native scrolling. Any ideas of how to get this working with native scrolling?


#29

i tried getting it working with native scrolling and failed. The only problem is I cant run into loop the spinner animation or even start any animation yet. Its happening when user scrolls down but manually i couldnt figured it out how to run spinner animation in the ionRefresher


#30

I have succeeded finally

@Calendee
I have updated your function to have native scrolling support. The complete function below its working 100%

/**
 * Trigger the pull-to-refresh on a specific scroll view delegate handle.
 * @param {string} delegateHandle - The `delegate-handle` assigned to the `ion-content` in the view.
 */
this.triggerPtr = function (delegateHandle) {

    $timeout(function () {

        function overscroll(val) {
            child.style[ionic.CSS.TRANSFORM] = 'translateY(' + val + 'px)';
        }

        var scrollView = $ionicScrollDelegate.$getByHandle(delegateHandle).getScrollView();

        if (!scrollView) return;

        if (scrollView.isNative) {
            var refresher = (angular.element(scrollView.el.children[0].children[0]).controller('ionRefresher'));
            var child = refresher.__getScrollChild();

            refresher.getRefresherDomMethods().show();
            refresher.getRefresherDomMethods().activate();
            refresher.getRefresherDomMethods().start();

            // decelerating to zero velocity
            function easeOutCubic(t) {
                return (--t) * t * t + 1;
            }

            var start = Date.now(),
                duration = 500,
                from = 0,
                Y = 60;

            // scroll loop
            function scroll() {
                var currentTime = Date.now(),
                    time = Math.min(1, ((currentTime - start) / duration)),
                // where .5 would be 50% of time on a linear scale easedT gives a
                // fraction based on the easing method
                    easedT = easeOutCubic(time);

                overscroll(parseInt((easedT * (Y - from)) + from, 10));

                if (time < 1)
                    ionic.requestAnimationFrame(scroll);
            };
            ionic.requestAnimationFrame(scroll);

            var listener = angular.element(scrollView.el.children[0].children[0]).scope().$on("scroll.refreshComplete", function () {
                from = 60;
                Y = 0;
                start = Date.now();
                ionic.requestAnimationFrame(scroll);

                refresher.getRefresherDomMethods().tail();
                refresher.getRefresherDomMethods().deactivate();
                refresher.getRefresherDomMethods().hide();

                listener();
            });

            return;
        }


        scrollView.__publish(
            scrollView.__scrollLeft, -scrollView.__refreshHeight,
            scrollView.__zoomLevel, true);

        var d = new Date();

        scrollView.refreshStartTime = d.getTime();

        scrollView.__refreshActive = true;
        scrollView.__refreshHidden = false;
        if (scrollView.__refreshShow) {
            scrollView.__refreshShow();
        }
        if (scrollView.__refreshActivate) {
            scrollView.__refreshActivate();
        }
        if (scrollView.__refreshStart) {
            scrollView.__refreshStart();
        }

    });

}

@nickh364 hey you can use my edit


#31

Hi !
I think the use case where we first need to pull from an API is really widespread, and so is the need for a function that triggers the pull to refresh animation !


#32

It did trigger refresh, but not scroll to the top, alway scroll to the same position, any idea on this?


#33

I there!

I was using following code for triggering pull to refresh manual.
https://calendee.com/2015/04/25/trigger-pull-to-refresh-in-ionic-framework-apps/
This worked fine until the Ionic 1.2.1 release.

However the .__publish method is undefined for android platform only. So I looked up the scrollView.js
https://github.com/driftyco/ionic/blob/master/js/views/scrollView.js

I found the new method triggerPullToRefresh, which uses the .__publish under the hood, but it’s undefined as well for the android platform.

Any ideas?


#34

@Flokki did you find a solution for this? I have the same problem


#35

I disabled native scrolling for android. I’ve a very simple view so it was an option for me…

# Disable native scrolling for android
$ionicConfigProvider.platform.android.scrolling.jsScrolling(true)