All geek questions in one place

Ionic infinite scrolling does not work on all Android devices

I am currently developing an ionic application and have successfully implemented an infinite scroll function. It works great on desktop browsers and newer Android devices, however I have problems with phones that have Android version 4.1 or less installed.

Problem:

I open the page, it loads and displays the first 20 items just fine, I scroll to the bottom, the next 20 elements load, but this does not allow me to scroll further to see the next 20 elements.

Here is a GIF showing how it looks on my desktop (how it should work). desktop gif

Here is another GIF showing how it looks on my xperia phone (note how it does not allow me to scroll further uploaded items). xperia gif

However, when I refresh the page or turn the phone into landscape mode after the next 20 items are loaded, the scrolling works very well, so it seems that the phone does not know that the screen height has changed when loading new elements, so I thought I could fix it by simply adding $ionicScrollDelegate.resize(); to show that the view is recalculating the size of its container, but this also does not correct it.

Here is my JavaScript code:

 .controller('TestCtrl', ['$scope', '$http', function($scope, $http) { $scope.items = []; $scope.page = 1; $scope.totalPages = 1; $scope.loadMore = function() { if ($scope.page <= $scope.totalPages) { $http.get('http://localhost/test/recent/' + $scope.page).success(function(items) { var i = items.data.length; $scope.totalPages = items.pages; $scope.items = $scope.items.concat(items.data); $scope.$broadcast('scroll.infiniteScrollComplete'); $scope.page = $scope.page + 1; if ($scope.page == $scope.totalPages + 1) { $scope.noMoreItemsAvailable = true; } }); } } }])

HTML:

 <ion-view view-title="Hello Stackoverflow"> <ion-content> <a class="item" ng-repeat="item in items"> {{item.title}} <span class="item-note"> {{ item.timestamp | myDate }} </span> </a> <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll> </ion-content> </ion-view>

I was stuck in this problem for 2 days, worked for several hours and tried many different things, but I could not find anything to fix this.

+5
source share
2 answers

Use collection-repeat instead of ng-repeat . This is not like Ionic with ng-repeat updates the view.

+1
source

I found a workaround ... Change this

 <ion-content>

to

 <ion-content overflow-scroll='false'>

to disable natural scrolling in this particular view.

+1
source

Source: https://habr.com/ru/post/1245051/

More articles:


All Articles