javascript - para - ionic version

Ionic infinite scroll no funciona en todos los dispositivos Android

Question

Actualmente estoy desarrollando una aplicación iónica y he implementado con éxito una función de desplazamiento infinito. Funciona bien en los navegadores de escritorio y en los dispositivos Android más nuevos, sin embargo, tengo problemas con los teléfonos que ejecutan la versión Android 4.1 o inferior.

El problema:

Abro la página, carga y muestra los primeros 20 ítems sin problemas, me desplazo hacia abajo, los siguientes 20 ítems se cargan, pero no me deja desplazarme más para ver los próximos 20 ítems.

Aquí hay un GIF que muestra cómo se ve en mi escritorio (la forma en que se supone que debe funcionar). GIF de escritorio

Aquí hay otro GIF que muestra cómo se ve en mi teléfono xperia (tenga en cuenta que no me permite avanzar más en los elementos recién cargados). xperia gif

Sin embargo, cuando actualizo la página o enciendo el teléfono en modo apaisado después de los siguientes 20 elementos cargados, el desplazamiento funciona bien, así que parece que el teléfono no sabe que la altura de la pantalla cambió cuando se cargaron los nuevos elementos, así que pensé Podría arreglarlo simplemente agregando $ionicScrollDelegate.resize(); para decirle a la vista que vuelva a calcular el tamaño de su contenedor, pero eso tampoco parece arreglarlo.

Aquí está mi código 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>

He estado atascado con este problema durante 2 días, busqué en Google durante horas y probé muchas cosas diferentes, pero no pude encontrar nada que lo solucionara.

Answer 1

He encontrado una solución alternativa ... Cambiar de esto

<ion-content>

a

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

para deshabilitar el desplazamiento nativo en esta vista particular.

Answer 2

Use collection-repeat lugar de ng-repeat . No parece que Ionic con ng-repeat refresque la vista.