Ionic无限滚动函数在页面加载时被调用

Question

Ionic无限滚动函数在页面加载时被调用

17

我正在使用Ionic框架创建一个基本的Feed应用程序。我已经使用了下拉刷新功能，但是我的ion-infinite-scroll出现了问题。

Feed.html

<ion-content ng-controller="FeedController" > 
    <ion-refresher pulling-text="Pull to refresh.." on-refresh="get_feeds()" refreshing-text="Fetching ..." refreshing-icon="ion-loading-b">
    </ion-refresher>
    <ion-list>
        <ion-item ng-repeat="question in questions">
            <div class="item item-divider">
{{question.question}}
            </div>
            <div class="item" ng-bind-html="question.answer | trustHtml">
            </div>
        </ion-item>
    </ion-list>
    <ion-infinite-scroll
        on-infinite="get_more()"
        distance="1%">
    </ion-infinite-scroll>
</ion-content>

Feed.js

 (function(){
    "use strict";
    angular.module( 'app.controllers' ).controller( 'FeedController', 
        [ 'eTobb', 'Users', '$scope', '$timeout', function( eTobb, Users, $scope, $timeout) {

            var pageIndex = 1;

            $scope.questions = [];

            $scope.get_feeds = function(pageIndex){
                eTobb.get($scope.apiCall, { user_id: Users.id, page: 0 }, function(response) {
                    if ( response ){
                        $scope.questions = $scope.questions.concat(response);
                        console.log($scope.questions);
                    }
                })
                .finally(function(){
                    $scope.$broadcast('scroll.refreshComplete');
                    $scope.$broadcast('scroll.infiniteScrollComplete');
                });
            };

            $scope.get_more = function(){
                $scope.get_feeds(pageIndex);
                pageIndex = pageIndex + 1; 
                console.log('why the hell am i being called?');
            };
        }
        ]);
})();

问题

当页面加载时，定义在无限属性上的方法会被调用两次，然后每次到达页面底部时就正常调用一次。有人知道为什么会这样吗？

- Jad Salhani

1

console.log('为什么我会被调用？'); 我也很好奇哈哈哈哈哈 - NHTorres

4个回答

5

RMD的答案在电脑上为我解决了问题，但是当我在Android上运行我的应用程序时，即使ion-infinite-scroll元素上设置了immediate-check="false"，我的vm.loadMore()函数仍会立即被调用。我通过向控制器添加一个辅助变量vm.initialSearchCompleted = false;并将其添加到我的ion-infinite-scroll元素中来解决了这个问题：

<ion-infinite-scroll
  on-infinite="vm.loadMore()"
  distance="1%"
  immediate-check="false"
  ng-if="vm.canLoadMoreResults && vm.initialSearchCompleted">
</ion-infinite-scroll>

当我的vm.search()函数的初始调用完成后，我设置了vm.initialSearchCompleted = true;。这解决了问题。

- L42

1

太棒了，这个做得非常好。 - achabacha322

4

您可以在ion-infinite-scroll上使用ng-if，这样当没有数据时，on-infinite的处理程序将不会被调用。

<ion-infinite-scroll
        on-infinite="get_more()"
        distance="1%"
        ng-if="questions.length">
 </ion-infinite-scroll>

- Shripal Soni

这就是我必须要做的。 - D.Hodges

0

'Ionic无限滚动函数在页面加载时被调用'的答案是在ion-infinite-scroll上使用immediate-check="false"

- Téwa

以下是有关编程的内容，从英语翻译成中文。请返回仅翻译后的文本：它应该是他回答的注释。 - Enamul Hassan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RMD · Accepted Answer

我也遇到了这个问题，但使用ng-if并没有解决问题，我也不认为这是解决这个问题的正确方法。根据Ionic的文档，你只需要使用ng-if来指示没有更多数据可用，并防止无限滚动器对“get_more”方法进行额外的调用。

我发现这个意外的“get_more()”调用在页面加载期间发生的原因是由于无限滚动器认为在第一次加载期间没有足够的内容（即：初始加载没有提供足够的结果来填充页面），因此它立即启动了另一个加载请求。

在我特定的场景中，我已经返回了足够多的记录来填充页面，但无限滚动器仍然在请求更多。我的列表大多填充了图像，我认为由于图像加载的时间与检查页面是否填充的时间之间的时序问题，滚动器不适当地调用了“get_more()”。

无论如何，解决我的问题的方法是告诉它在加载时不要立即执行边界检查；你可以使用immediate-check属性来实现这一点，例如：

<ion-infinite-scroll immediate-check="false" on-infinite="vm.localDataManager.getData()" ng-if="vm.localDataManager.canGetData()" distance="1%">