Hi there, I’ve implemented infinity scroll successfully. Works great, however if the list of content does not reach the bottom of my screen and total items have not finished yet, my loading circle is always being displayed.
For example: If I’ve got 10 registers in a list (Total) and I’ve set up my infinity scroll to load 5 items per request and those first 5 items don’t reach the end of my screen (bottom) my loading scroll is displayed until I scroll down again and loads more (in order hide under the limit of page), or finish my list (Where I fire a NO MORE ITEMS event).
Extra: I’ve included: $scope.$broadcast(‘scroll.infiniteScrollComplete’); and it’s being received on ionic.bundle.js with no problems. (I’ve also found out that there’s a $element[0].classList.add(‘active’); when scroll start and a $element[0].classList.remove(‘active’); for the broadcast set. But scroll won’t disappear.
Thanks for your reply.
It would be a little confusing sharing my code, once I load data from a rest api and I have no TOTAL rows, I set my “no-more-data” var when my request is empty or fewer than “items-per-request”. It’s working as expected, once there’s no more content to load, infinity scroll is disabled.
CTRL:
$scope.keepLoading = true;
(…Here I’ve got a service that returns my list of records… working fine, I send parameters like: start_row and limit).
service.query(parameters).then(function(response) {
if( !response.data.rows.length || $scope._listOfRecords.length < itemsPerPage ) {
$scope.keepLoading = false;
}
$scope.$broadcast(‘scroll.infiniteScrollComplete’);
});
…
As as said, my “keepLoading” flag is smooth, the only issue is concerning the LOADING gif that will ONLY hide if keepLoading is set false and my entire will disappear.
(HTML tag).
Apparently some internal infinity scroll function seen not to be interaction properly with my DOM. I’ve DEBUGGED with console.log() and $broadcast is getting there correctly.
@d4dilip I apreciate your time and interest to help me. I’ve looked at your code and saw no difference from mine actually. In fact, I’m having no problem with infinity scroll itself or rest request… My only problem the LOADING gif component that won’t hide after each request. (Request worked perfectly and $broadcast too) it seen to be a matter of CSS or something…
Well I do not get such scenario here … may be you are right it could be some CSS magic
have you tried it in a separate sample code just infinite scroll+ REST call+ionic js+css library ?
Good luck with that buddy … lemme know if I can be any help
Hey Kzoty, if I understand your problem, I think I had a similar issue, where the loading gif was always shown at the endof my list. I noticed by looking at the css that this loading gif was hidden / shown just by changing it’s top value. I fixed my problem by overwriting this values.
I hope this can help you. I am just answering by memory, so if you want more precise info about this, let me know and I can try to give a better explanation
As matter of fact, that’s what I’ve done, I created a CSS to overwrite including a display: none when every request is finished, and another display: block for new start request.
