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 theinfinite-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) andscrollBottom
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);
};
});