我正在使用离子框架创建基本的Feed应用。我可以继续学习,但是离子无限滚动却遇到了麻烦。
<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>
(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属性上定义的方法将调用两次,然后在每次到达页面底部时(通常)调用一次。有谁知道为什么会这样吗?
我也遇到了这个问题,但是使用ng-if并不能解决问题,我也不认为这是解决此问题的正确方法。
根据Ionic的文档,您只能使用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%">
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句