我正在使用离子框架来创建一个基本的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%">