Pull to refresh at the bottom of a list


#1

Hi everyone,

I’m trying to implement a ion-refresher like feature on my list but than for when pulling further than the bottom of the list. For now I have been looking into the direction of infinite-scroll to do this but as of now I can’t get this to work properly. Some of the challenges this brings are summed below:

  • If the list is smaller than the ion-content height the infinite-scroll will be called continuously.
  • The refresher should only be called when specifically pulled further than the bottom. (Not just when the scroll bounces on the bottom)
  • It would be nice if the updated items are scrolled into view after the refresh. (this means scrollTop when the (list-height < ion-content-height) and scrollBottom if (list-height >= ion-content-height)

I will try to add a codepen as fast as possible to show what I’ve got upto now. I’m however fairly new to angular js and will first clean up the code a little for the pen.

Find some code snippets below:

HTML:

<ion-content has-bouncing="true" content-height>
<div style="" ng-style="windowHeight">
    <ion-list>

      <ion-item ng-repeat="post in posts  | orderBy:post.timeStamp"> 
        <div>
          <span>{{post.message}}</span> 
        </div>
      </ion-item>

    </ion-list>
</div>

<ion-infinite-scroll on-infinite="updateList()" distance="-10%">
</ion-infinite-scroll>

JS:

var app = angular.module('testApp', ['ionic'])

app.directive('contentHeight', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element) {
            /*Set a min-height so the infinite-scroll is not in view. (88px is the padding of the ion-content)*/
            scope.windowHeight = {'min-height': element[0].offsetHeight - 88 + 'px'}
        }
    };
})

app.controller('testCtrl', function($scope, $timeout, $ionicScrollDelegate, $window) {
  $scope.updateList = function() {
    alert('Refresh called')
    $ionicScrollDelegate.scrollBottom(true);
    $timeout(function() {
      $scope.$broadcast('scroll.infiniteScrollComplete');
    }, 300);
  };
});

#2

I am also looking for this feature.
However, I digged into the ionRefresher code and saw how deeply involved that code is. It is not easily added (I failed in doing so).


#3

The ion-refresher might indeed be a good point to start. I haven’t looked into the code as of yet but doubt I’m familiar enough with AngularJS to fully develop an general refresher for the bottom of an ion-list. If anyone else as already put an effort into making something like this work I would be very interested. It would enable a whatsApp like refresh interface to be added to ion-lists.


#4

believe that many people want this kind of ios-like bottom infinite-scroll, anybody has idea on this?


#5

HI Tobias,

Is distance=-10% work for you?


#6

I find this code pen.

Try to use distance = -10.