加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs – 离散无限滚动功能在页面加载时调用

发布时间:2020-12-17 08:05:38 所属栏目:安全 来源:网络整理
导读:我正在使用离子框架来创建一个基本的Feed应用程序。我得到了复习,但我遇到麻烦我的离子无限卷动。 Feed.html ion-content ng-controller="FeedController" ion-refresher pulling-text="Pull to refresh.." on-refresh="get_feeds()" refreshing-text="Fetc
我正在使用离子框架来创建一个基本的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?');
            };
        }
        ]);
})();

问题

在无限属性上定义的方法在页面加载时被调用两次,然后每次页面底部都被正常调用(一次)。
有人知道为什么会这样吗?

我也遇到这个问题,但是使用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%">

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读