离子无限滚动不工作在所有Android设备上

问题描述

我目前正在开发离子应用程序，并成功实现了无限滚动功能。它在桌面浏览器和更新的Android设备上可以正常工作，但是，我有运行Android 4.1或更低版本的手机的问题。

I'm currently developing an ionic app and successfully implemented an infinite scroll feature. It works fine on desktop browsers and newer android devices, however, i'm having problems with phones that run android version 4.1 or less.

问题： / strong>

The problem:

我打开页面，它加载并显示前20个项目很好，我滚动到底部，接下来的20个项目加载，

I open the page, it loads and displays the first 20 items just fine, i scroll to the bottom, the next 20 items load, but it doesn't let me scroll any further to see the next 20 items.

这里是一个GIF，显示它在我的桌面上的样子（它应该工作的方式）。

Here is a GIF showing how it looks on my desktop (the way it's supposed to work). desktop gif

这里是另一个GIF显示它在我的xperia手机上的样子（注意它怎么不让我进一步滚动新加载的项目）。

Here is another GIF showing how it looks on my xperia phone (note how it doesn't let me scroll further on newly loaded items). xperia gif

但是，当我刷新页面，或在下20个项目加载后将手机转为横向模式，滚动工作正常，所以似乎手机不知道屏幕高度改变时新项目加载，所以我想我可以通过简单地添加 $ ionicScrollDelegate.resize（）; 来告诉视图重新计算其容器的大小，

However, when i refresh the page, or turn the phone into landscape mode after the next 20 items loaded, the scrolling works just fine so it seems like the phone doesn't know that the screen height changed when the new items loaded so i thought i could get it fixed by simply adding $ionicScrollDelegate.resize(); to tell the view to recalculate the size of its container, but that doesn't seem to fix it either.

以下是我的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天，googled了几个小时，尝试了许多不同的事情，但我找不到任何固定的东西。

I've been stuck with this problem for2 days, googled for hours and tried many different things, but i couldn't find anything that fixed it.

推荐答案

使用 collection-repeat 而不是 ng-repeat 。它似乎不像离开 ng-repeat 刷新视图。

Use collection-repeat instead of ng-repeat. It doesn't seem like Ionic with ng-repeat refreshes the view.

这篇关于离子无限滚动不工作在所有Android设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！