javascript - ionic 无限滚动不适用于所有 Android 设备

Question

我目前正在开发一个 ionic 应用程序并成功实现了无限滚动功能。它在桌面浏览器和较新的 Android 设备上运行良好，但是，我在运行 Android 4.1 或更低版本的手机上遇到问题。

问题:

我打开页面，它加载并显示前 20 个项目，我滚动到底部，加载接下来的 20 个项目，但它不允许我进一步滚动以查看接下来的 20 个项目。

这是一个 GIF，显示它在我的桌面上的外观(它应该工作的方式)。 <强> desktop gif

这是另一个 GIF，显示它在我的 xperia 手机上的外观(请注意它如何不允许我在新加载的项目上进一步滚动)。 <强> xperia gif

但是，当我刷新页面，或者在加载接下来的 20 个项目后将手机转为横向模式时，滚动效果很好，所以手机似乎不知道加载新项目时屏幕高度发生了变化所以我想我可以通过简单地添加 $ionicScrollDelegate.resize(); 来告诉 View 重新计算其容器的大小来修复它，但这似乎也没有修复它。

这是我的 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>

我已经被这个问题困扰了 2 天，在谷歌上搜索了几个小时并尝试了很多不同的方法，但我找不到任何解决方法。

Answer 1

使用 collection-repeat 而不是 ng-repeat。带有 ng-repeat 的 Ionic 似乎不会刷新 View 。