页面加载时调用的离子无限滚动功能

Posted 2023-03-11

【中文标题】页面加载时调用的离子无限滚动功能

【英文标题】：Ionic infinite scroll function invoked on page load

【发布时间】：2015-03-12 08:57:10

【问题描述】：

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

【问题讨论】：

"console.log('为什么我会被叫到？');"我想知道同样的 Jajajajajaja

【参考方案1】：

可以在ion-infinite-scroll上使用ng-if，这样当没有数据时，on-infinite的handler就不会被调用。

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

【讨论】：

这是我必须做的。

【参考方案2】：

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

根据 Ionic 的documentation，您只能使用 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%">

【讨论】：

很好的解释！我知道问题是这样的，但我无法找到解决方案，而且您的解决方案比使用 ng-if 更有意义：D

非常感谢。我认为这实际上应该作为 Ionic 的默认设置内置到指令中..

我的问题是 ng-if 运行不佳，范围变量 'moredata' 始终为 true，但无限滚动放在列表末尾时永远不会执行调用。如果我删除 ng-if，它可以正常工作但始终处于活动状态。不知道发生了什么。

【参考方案3】：

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

【讨论】：

应该是在评论他的回答

【参考方案4】：

RMD 的回答在计算机上为我解决了这个问题，但是当我在 android 上运行我的应用程序时，我的 vm.loadMore() 函数被立即调用，即使在我的 ion-infinite-scroll 元素上设置了 immediate-check="false"。我通过向控制器添加一个辅助变量 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;。这样就解决了问题。

【讨论】：

宾果游戏，成功了