Pull down to refresh example?

[cliffsun91]

Hi, does this module support pull down to refresh? If so is there a quick example of how to do it? I've tried to follow the example from the iscroll website (http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/) but the iscroll options involve accessing the DOM and manipulating it. I was wondering if there was a proper way to do it.

Thanks!

[diegolameira]

I'm waiting too!

[mboulord]

hi, I write an AngularJS directive for use pull to refresh with this module: https://github.com/mboulord/ng-iScroll-pull-to-refresh

[diegolameira]

All right, but how about ng-scroll#v1.2b and iScroll 5?

[JonnyBGod]

this is my code for both pull-to-refresh and infinite-scroll using my own version of ng-iscroll (https://github.com/ibspoof/ng-iScroll/pull/12) and iscroll 5

$scope.loading = search.loading;
$scope.yStartFromZero = false;

$scope.$parent.myScrollOptions = {
    'list_wrapper': {
        snap: false,
        scrollbars: 'custom',
        fadeScrollbars: true,
        probeType: 2,
        //mouseWheel: true,
        interactiveScrollbars: true,
        //preventDefault: false,
        on: [
            { beforeScrollStart: function () {
                if (this.y === 0) {
                    $scope.yStartFromZero = true;
                }

            }},
            { scrollEnd: function () {
                if ($scope.yStartFromZero && this.directionY === -1) {
                    this._execEvent("pullToRefresh");
                }
                $scope.yStartFromZero = false;
                $scope.infiniteScroll = false;
            }},
            { pullToRefresh: function () {
                console.log('Pull to Refresh!');
            }},
            { scroll: function () {
                if (!$scope.infiniteScroll && !search.loading && !search.endlist && (this.y <= this.maxScrollY + 800)) {
                    $scope.infiniteScroll = true;
                    search.__search();
                }
            }}
        ]
    }
}; 

[vaskgjuri]

JonnyBGod, thanks for the JS snippet. Could you provide the HTML as well on how do you use it as whole example? I am having trouble with this code as I tried to implement it in my case but have struggled with it.

BR

[JonnyBGod]

Sure, my html is as simple as:

<div ng-iscroll='list_wrapper'>
  <div>
    <div class="YOUR CONTENT" ng-repeat="i in items track by i.id">
    </div>
  <div>
</div>

[vaskgjuri]

I thought my problem was with the html implementation but it seems like we are ok on that side. The problem I am having is that the pull down to refresh does not load on initial page load, but rather when I refresh the view. Any thoughts on why could this be happening?

BR

[orenagiv]

I've prepared a demo - hope this helps: http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html

The DEMO includes both Pull to Refresh and "infinite" scroll (but not using the iscroll-infinite.js).

[pmadhu420]

Hi, I am using iscroll5 and TopOffset is not working and i am pasting my code and pull to refresh is not working can any one help me and make necessary change to work pull to refresh and it is an urgent requirement for production fix.

function createScroller(wrapper, pullDownAction, scrollStart, scrollMove, scrollEnd, beforeScrollStart, enableBeforeScrollStart) { var myScroll, pullDownEl, pullDownOffset = 0;

        var wrapperEl = typeof wrapper == 'object' ? wrapper : doc.getElementById(wrapper);
        var scrollerEl = wrapperEl.children[0];
        $(scrollerEl).prepend("<div class='pullDown'></div>");
        pullDownEl = $(scrollerEl).find('.pullDown')[0];
        pullDownOffset = pullDownEl.offsetHeight;
        myScroll = new IScrollV5(wrapper, {
            mouseWheel: true,
            hideScrollbar: true,
            fadeScrollbar: true,
            useTransition: true,
            click: true,
            scrollbarClass: 'Scrollbar',
            topOffset: pullDownOffset,
        });
        myScroll.on("scrollMove", function () {
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                this.minScrollY = -pullDownOffset;
            }
            if (scrollMove != undefined)
                scrollMove();
        });
        myScroll.on("scrollEnd", function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'pullDownloading';
                pullDownAction(this);
            }
            if (scrollEnd != undefined)
                scrollEnd();
        });
        myScroll.on("refresh", function () {
            if (pullDownEl.className.match('pullDownloading')) {
                pullDownEl.className = '';
            }
        });
    }

    return myScroll;

} var scroller = { createScroller: createScroller, }

return scroller;

});