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

使用ecx代替collection-repeat。它似乎不像Ionic，ng-repeat刷新视图。

Answer 2

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

<ion-content>

到

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

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

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

2 个答案: