离子无限滚动不适用于所有安卓设备

Question

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

问题：

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

这是一个 GIF，展示了它在我的桌面上的外观（它应该工作的方式）。 desktop gif

这是另一个 GIF，展示了它在我的 xperia 手机上的外观（请注意，它不允许我在新加载的项目上进一步滚动）。 xperia gif

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

这是我的 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 似乎不会刷新视图。

Answer 2

我找到了一个解决方法...改变这个

<ion-content>

到

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

在此特定视图中禁用本机滚动。