ionic指令ion-content和指令ion-infinite-scroll實(shí)現(xiàn)上拉加載分頁功能
代碼如下：
<ion-content ng-if="tab1">
<div ng-repeat="item in lists track by $index">
..................
</div>
<ion-infinite-scroll ng-if="hasMore" on-infinite="loadMore()" immediate-check="false" distance="2%"></ion-infinite-scroll>
</ion-content>
上述代碼會有一個(gè)問題：
由于一個(gè)頁面有多個(gè)tab乱凿，切換tab加載不同的列表般哼，如果在ion-content使用ng-if指令泌射，則列表不能滾動(dòng)。去掉ng-if后可以滾動(dòng)猎醇，由于每個(gè)tab列表不一樣，每個(gè)item顯示樣式也不一樣火焰，需要做區(qū)分。
解決辦法：
在<ion-content>里層包一個(gè)div標(biāo)簽胧沫，在div上使用ng-if做區(qū)分荐健，如下：
<ion-content>
<div ng-if="tab1" ng-repeat="item in lists1 track by $index">
..................
</div>
<div ng-if="tab2" ng-repeat="item in lists2 track by $index">
..................
</div>
<ion-infinite-scroll ng-if="hasMore" on-infinite="loadMore()" immediate-check="false" distance="2%"></ion-infinite-scroll>
</ion-content>
問題2：上拉分頁加載時(shí)，觸發(fā)多次加載請求琳袄，
解決辦法：網(wǎng)上很多人說加上immediate-check="false"，然而不起作用纺酸，
$scope.loadMore = function(){
$http(...).then(function(res){
if(res.data.length<=10){
$scope.hasMore = false;
}else{
$scope.hasMore = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
$timeout(function () {
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1000);
}
