Question

我正在使用＆＃39; ion-infinite-scroll＆＃39;在html中加载来自服务器的更多项目我正在使用下面的代码

<ion-infinite-scroll immediate-check="false" on-infinite="getListOfAreas()" distance="1%">
    </ion-infinite-scroll>

这里，当我将屏幕滚动到底部并从服务器获取数据时调用getListOfAreas（）函数。这是在控制器上定义的getListOfAreas（）函数

$scope.getListOfAreas = function (shoudlShowLoader) {
AreaBusiness.getAreasListing(shoudlShowLoader, function(serviceResponse) {
    $scope.$broadcast('scroll.infiniteScrollComplete');
        if (serviceResponse != null) {
            var isSuccess = serviceResponse.Success;
            if (isSuccess) {

            }
        }
    }   
}

在浏览器上，我调试了一些

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

上面的代码行保持调用和旋转器不停旋转。我不知道原因。我错过了什么吗？

Answer 1

$scope.$broadcast('scroll.infiniteScrollComplete');只让离子知道当前的数据页面已被提取，并且现在可以安全地获取下一页。这并不表示所有数据都已完成加载。

看起来官方的建议是在滚动委托中添加ng-if，并在没有更多数据要加载时从dom中删除它。

示例：

<ion-infinite-scroll
    ng-if="moreDataCanBeLoaded()"
    icon="ion-loading-c"
    on-infinite="loadMoreData()">
</ion-infinite-scroll>

来源：https://ionicframework.com/docs/api/directive/ionInfiniteScroll/

Answer 2

我花了一些时间后解决了这个问题。我发现的问题是，我没有将这些元素添加到要在UI上显示的列表中。因此，列表没有在控制器上更新，这就是为什么它一直在调用。所以我更新了我的代码，并将那些从服务获取的项目添加到与ui关联的列表中，如下面的代码中所述

$scope.$broadcast('scroll.infiniteScrollComplete');
if (serviceResponse != null) {
    var isSuccess = serviceResponse.Success;
        if (isSuccess) {        
            if ($scope.areas !=  undefined && $scope.areas.length > 0) {
                pushDataToPOIList(serviceResponse.PointOfInterestData);
            } else {
                $scope.areas = serviceResponse.PointOfInterestData;
            }

pushDataToVehiclesList（）方法我添加了将新数据推送到列表中以更新列表和UI。这有助于我解决问题。

为什么离子无限滚动一直在Android中调用滚动？

2 个答案: