离子列表无限滚动问题与Assinc请求

Ionic list infinite scroll issue with assync request

本文关键字:Assinc 请求 问题 滚动 列表 无限      更新时间:2023-09-26

我对assync请求填充的Ionic列表有问题。

在HTML中,我有以下内容:

<ion-list class="list" ng-init="setDateRange('today');" >
          <!--IF NO ITEM IS FOUND -->
          <ion-item class="listCenter" ng-if="listData.length == 0 || listData.length == null">
              <h2>No data found, try to make few calls</h2>
          </ion-item>
          <ion-item class="item" ng-repeat="listDataItem in listData">
          <!--HTML CONTENT OF ITEM REMOVED FROM EXAMPLE -->
          </ion-item>
          <ion-infinite-scroll
                  icon="ion-loading-c"
                  distance="10%"
                  on-infinite="setDateRange('past')">
          </ion-infinite-scroll>
 </ion-list>

在ng中,init被称为方法setDateRange方法,该方法在数据库上的分离方法中触发assync请求。

我认为,这个问题可能是在updateList和createList中$broadcast方法scroll.infiniteScrollComplete的实现中,如下所示。

$scope.updateList = function() {
            console.log('Trying to update list');
            $timeout(function() {
                $scope.$apply(function() {
                    listData.forEach(function(item){
                        $scope.listData.push(item);
                        console.log("List length is "+ $scope.listData.length);
                    });
                    $ionicLoading.hide();
                });
                $scope.$broadcast('scroll.infiniteScrollComplete'); // should be removed in production
                $scope.$broadcast('scroll.resize');
            });
        };
        $scope.createList = function() {
            console.log('Trying to render list');
            alert("render");
            $timeout(function() {
                $scope.$apply(function() {
                    $scope.listData = listData;
                    console.log("List length is "+ $scope.listData.length);
                });
                // Infinite scroll broadcast should be here to avoid
                // triggering of the on-infinite event
                $scope.$broadcast('scroll.infiniteScrollComplete');
            });
            $ionicLoading.hide();
        };

因为在ng过程中,init也被触发了方法updateList,这是无法完成的,因为$scope.listData此时不存在。

有人能告诉我如何实现吗

$scope.$broadcast('scroll.infiniteScrollComplete') 

 $scope.$broadcast('scroll.resize');

以正确的方式?

谢谢你的帮助。

这里有一些注释,以及底部演示的链接,以显示完整的实现。如果没有完整的代码进行测试并查看是否存在其他瓶颈,就有点难以判断。

  • 我不会使用ng-init,只是在你的控制器中调用它。然后你就知道什么时候会发生
  • 您可以通过在控制器$scope.listData = [];中设置一个变量来初始化您的模型
  • 您不应该广播scroll.resize事件。您应该将ionList放置在ionContentionScroll
  • 不需要将class="item"放在<ion-item>上,而是自动添加
  • 您将希望在无限滚动中添加一个ng-if,以便它知道何时停止加载更多数据(请参阅下面的示例)
  • 您应该避免总是使用$scope.apply(),在这种情况下,您无论如何都不需要它

这是我最近制作的一个代码笔,其中有一个使用infiniteScroll的好例子,它可能会帮助你理解如何正确使用它。http://codepen.io/gnomeontherun/pen/HJkCj