如何在Ionic中使用无限滚动时加载更多的微调器?

时间:2017-02-04 20:42:51

标签: javascript html angularjs ionic-framework

我无法让它发挥作用。我试图在向下滚动时显示10个项目(所以最初为10,滚动后再添加10个新项目),同时使用ng-repeat并且这可以正常工作,但是加载更多的微调器没有为我工作。无论我做什么,我都无法表现出来。

HTML:

<li class="item" ng-repeat="schedule in Schedules | filter:scheduleSearch | limitTo:numberOfItemsToDisplay | orderBy: 'namesAlphabet' as names">
    Display some data
</li> 
<ion-infinite-scroll on-infinite="addMoreItem()" ng-if="Schedules.length > numberOfItemsToDisplay"></ion-infinite-scroll>

我的控制器:

$scope.numberOfItemsToDisplay = 10; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
    if ($scope.Schedules.length > $scope.numberOfItemsToDisplay)
        $scope.numberOfItemsToDisplay += 10; // load number of more items
        $scope.$broadcast('scroll.infiniteScrollComplete')
}   

我该怎么做?有没有办法将滚动绑定到图标?

1 个答案:

答案 0 :(得分:1)

我的猜测是,在加载图标显示之前,项目的加载速度过快,导致infiniteScrollComplete被广播。

如果您坚持要在这种情况下显示加载图标,请向其添加$timeout

$scope.addMoreItem = function(done) {
    $timeout(function() {
        if ($scope.Schedules.length > $scope.numberOfItemsToDisplay)
            $scope.numberOfItemsToDisplay += 10; // load number of more items
            $scope.$broadcast('scroll.infiniteScrollComplete')
    }, 2000);
}