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

ionic-v1
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

1 Like
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)
36

@Flokki The PtrService of Calendee is not working anymore, like you have mentioned. Did you solve it?

37

Yes through disabling the native scroll. Look above.

38

not working inside component but working inside a page