Feed.html

Question

我正在使用离子框架来创建一个基本的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-infinite属性上定义的方法在页面加载时调用两次，然后在每次到达页面底部时正常调用（一次）。有谁知道为什么会这样？

Answer 1

我也遇到过这个问题，但是使用ng-if没有解决问题，我也不相信它是解决这个问题的正确方法。

根据Ionic的documentation，您只能使用ng-if表示没有其他数据可用，并且阻止无限卷轴再次调用＆＃34; get_more＆＃ 34;方法。

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

在我的特定场景中，我已经返回了足够多的记录来填充页面，但无限卷轴仍在请求更多。我的列表主要是用图像填充，我认为滚动条不适当地调用了＆＃34; get_more（）＆＃34;由于加载图像和检查页面是否填满之间的时间问题。

在任何情况下，我的问题的解决方案是告诉它不对负载执行立即边界检查;使用immediate-check属性执行此操作，即：

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

Answer 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;。这解决了这个问题。

Answer 3

你可以在离子无限滚动中使用ng-if，所以当没有数据时，不会调用on-infinite的处理程序。

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

Answer 4

“页面加载时调用的离子无限滚动函数”的答案是 immediate-check="false"上的ion-infinite-scroll

在页面加载时调用离子无限滚动函数

Feed.html

Feed.js

问题

4 个答案: