web-dev-qa-db-ja.com

Ionicページのロード時に呼び出される無限スクロール機能

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

問題

On-infiniteプロパティで定義されたメソッドは、ページの読み込み時に2回呼び出され、ページの下部に到達するたびに（1回）通常どおり呼び出されます。なぜこれが起こるのか誰か知っていますか？

angularjsscrollionic-frameworkinfiniteionic
17
Jad Salhani

私もこの問題に遭遇しましたが、ng-ifを使用しても問題は解決しませんでした。また、この問題を解決する正しい方法であるとは思いません。

Ionicの documentation によると、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%">
53
RMD

RMDの答えはコンピューターで問題を解決しましたが、Android my 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;_を設定しました。それで問題は解決しました。

5
L42

Ion-infinite-scrollでng-ifを使用できるため、データがない場合、on-infiniteのハンドラーは呼び出されません。

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

「ページの読み込み時に呼び出されるイオン無限スクロール関数」の答えはimmediate-check="false" オン ion-infinite-scroll

0
Téwa