Ionic infinite scroll nie działa na wszystkich urządzeniach z systemem Android.

Question

Aktualnie pracuję nad aplikacją jonową iz powodzeniem zaimplementowałem funkcję nieskończonego przewijania. Działa dobrze na przeglądarkach komputerowych i nowszych urządzeniach z Androidem, jednak mam problemy z telefonami z systemem Android w wersji 4.1 lub niższej.

Problem:

otworzyć stronę, ładuje i wyświetla pierwsze 20 pozycji w porządku, i przewiń do dołu, następne 20 sztuk ładunku, ale nie pozwól mi przejść każdy dalej, aby zobaczyć kolejne 20 pozycji.

Oto GIF pokazujący, jak wygląda na moim pulpicie (sposób, w jaki powinien działać). desktop gif

Oto kolejny GIF pokazując, jak to wygląda na moim telefonie Xperia (zauważ, jak to nie pozwala mi przejść dalej na nowo obciążonych elementów). xperia gif

Jednak, kiedy odśwież stronę, lub włączyć telefon w trybie poziomym po kolejnych 20 elementów obciążonych, przewijanie działa dobrze, więc wydaje się, że telefon nie wiedzieć, że wysokość ekranu zmieniła się, kiedy nowe załadowane elementy, więc pomyślałem, że mogę je naprawić, po prostu dodając $ionicScrollDelegate.resize();, aby powiedzieć widokowi, aby ponownie przeliczył rozmiar swojego kontenera, ale to też nie wydaje się go naprawić.

Oto mój kod JavaScript:

.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> 

Zostałem zatrzymany z tym problemem for2 dni google godzinami i próbowaliśmy wielu różnych rzeczy, ale nie mogłem znaleźć niczego, co by to naprawiło.

Answer 1

Użyj collection-repeat zamiast ng-repeat. Wygląda na to, że nie jest jonowy z odświeżeniem widoku.

Answer 2

Znalazłem obejście ... zmienić z tego

<ion-content> 

do

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

wyłączyć natywną przewijanie w tym szczególnym widoku.