Ионная бесконечная функция прокрутки, вызываемая при загрузке страницы

Я использую ионную структуру для создания основного приложения Feed. Я получил переподготовку, но у меня проблемы с моим бесконечным прокруткой.

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?');
            };
        }
        ]);
})();

Проблема

Метод, определенный для свойства on-infin, вызывается два раза, когда страница загружается, а затем вызывается нормально (один раз) каждый раз, когда достигается нижняя часть страницы. Кто-нибудь знает, почему это происходит?

Ответ 1

Я также столкнулся с этой проблемой, однако использование ng-if не решило проблему и не верю, что это правильный способ решить эту проблему.

В соответствии с документацией Ionic вы должны использовать только ng-if, чтобы указать, что дополнительные данные недоступны, и чтобы предотвратить бесконечный скроллер от дополнительных вызовов к метод get_more.

То, что я нашел причиной этого неожиданного вызова get_more() во время загрузки страницы, вызвано бесконечным скроллером, считая, что во время первой загрузки недостаточно содержимого (т.е. начальная нагрузка не дала достаточных результатов для заполнения страницы), и поэтому он сразу же инициировал другой запрос на загрузку.

В моем конкретном сценарии я вернул более чем достаточно записей, чтобы заполнить страницу, однако бесконечный скроллер все еще запрашивал больше. Мой список был в основном заполнен изображениями, и я думаю, что скроллер неправильно вызывал "get_more()" из-за проблем с синхронизацией между загрузкой изображений и проверкой, была ли эта страница заполнена.

В любом случае решение моей проблемы состояло в том, чтобы сказать, чтобы она не выполняла немедленную проверку границ нагрузки; вы делаете это с помощью атрибута немедленной проверки, то есть:

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

Ответ 2

Ответ RMD решил проблему для меня на компьютере, но при запуске моего приложения в Android моя функция vm.loadMore() вызывалась немедленно, даже если immediate-check="false" был установлен в моем элементе ion-infinite-scroll. Я решил это, добавив вспомогательную переменную 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;. Это решило проблему.

Ответ 3

Вы можете использовать ng-if на ion-infin-scroll, поэтому, когда данных нет, обработчик on-infin не будет вызываться.

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

Ответ 4

Ответ функции "Ионная бесконечная прокрутка, вызываемая при загрузке страницы" immediate-check="false" on ion-infinite-scroll