我最近一天尝试用离子框架构建移动应用程序。而且我发现离子的直接列表在它只有大约30个或更多的项目时非常慢,这是非常糟糕的。我在 angularjs 中尝试了 bindonce 方法来减少观察者的数量,但这并没有多大帮助。所以我尝试使用离子具有的无限滚动功能。
我的模板是这样的:
<view title="'Pet Information'">
<content has-header="true" has-tabs="true" on-infinite-scroll="loadMore">
<list>
<item ng-repeat="pet in pets" type="item-text-wrap" href="#/tab/pet/{{pet.id}}">
<h3>{{pet.title}}</h3>
<p>{{pet.description}}</p>
</item>
</item>
</list>
</content>
</view>
我的控制器
.controller('PetIndexCtrl', function($scope, PetService) {
$scope.pets_all = PetService.all();
$scope.pets = [];
// Add just 10 pets at the first time
var count = 0;
for (var i = 0; i < 10; i++) {
$scope.pets.push($scope.pets_all[i]);
count++;
};
$scope.loadMore = function() {
var curr_count = count;
for (var i = curr_count; i < curr_count + 10; i++) {
if (i < $scope.pets_all.length) {
$scope.pets.push($scope.pets_all[i]);
count++;
} else {
return;
}
}
}
})
我的想法是,列表第一次只会加载10个项目,每次用户滚动到手机的下边缘时,它将调用 loadMore 功能,该功能将再加载10个项目。但似乎 loadMore 函数只调用了一次,因此我所拥有的只是20项的列表,而我的数组超过100项。
也许我错了或离子框架的无限卷轴有错误?
答案 0 :(得分:10)
似乎有一种新方法可以在Ionic 2中执行此操作。现在您必须在loadMore回调中广播一个事件,以表示加载已完成。
$scope.$broadcast('scroll.infiniteScrollComplete');
答案 1 :(得分:3)
我发现我的代码有什么问题。我刚刚错过了代码中的完成回调。我在github的例子中看到了它,但我只是认为这是一个不需要的选项,可怜的我:)。
$scope.loadMore = function(done) {
$timeout(function(){
var curr_count = count;
for (var i = curr_count; i < curr_count + 7; i++) {
if (i < $scope.pets_all.length) {
$scope.pets.push($scope.pets_all[i]);
count++;
} else {
return;
}
}
done();
}, 1000);
}
答案 2 :(得分:1)
对于angular2 / typescript离子firebase应用程序,下面的代码有效。
设置$event.state = "closed";
以多次调用该函数。完整的代码在下面给出以供参考。
在组件中,
导入强>
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
<强>声明强>
limit: number = 10;
itemRef:FirebaseListObservable<any[]>;
itemList:any;
loadeditemList:any;
Firebase呼叫
getData(){
this.itemRef = this.firebase.list('quote', {
query: {
orderByChild: 'title',
limitToFirst:this.limit
}
});
}
滚动调用
onInfiniteScroll($event:any) {
this.limit += 10;
this.getData();
this.itemRef.forEach((itemList:any) => {
let items:any = [];
itemList.forEach( (item:any) => {
items.push(item);
return false;
});
this.itemList = items;
this.loadeditemList = items;
$event.state = "closed";
});
}
<强> HTML 强>
<ion-list>
...
</ion-list>
<ion-infinite-scroll (ionInfinite)="onInfiniteScroll($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
调用getData()并在构造函数中注入firebase。
private firebase: AngularFireDatabase