异步请求的离子列表无限滚动问题答案

【问题标题】：Ionic list infinite scroll issue with assync request异步请求的离子列表无限滚动问题
【发布时间】：2014-10-12 16:51:34
【问题描述】：

我对由异步请求填充的 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 方法，该方法在数据库的分离方法中触发异步请求。

我认为，这个问题可能出在 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');

以正确的方式？

感谢您的帮助。

【问题讨论】：

标签： javascript angularjs scrollview ionic-framework

【解决方案1】：

这里有一些注意事项，以及底部的演示链接，以显示完整的实现。如果没有完整的代码来测试看看是否还有其他瓶颈，这有点难以判断。

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

这是我最近做的一个codepen，里面有一个使用infiniteScroll的好例子，它可以帮助你理解如何使用它。 http://codepen.io/gnomeontherun/pen/HJkCj

【讨论】：