关于ion-content 上拉加载实现分页的问题

ionic指令ion-content和指令ion-infinite-scroll实现上拉加载分页功能

代码如下:

<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>

上述代码会有一个问题:

由于一个页面有多个tab,切换tab加载不同的列表,如果在ion-content使用ng-if指令,则列表不能滚动。去掉ng-if后可以滚动,由于每个tab列表不一样,每个item显示样式也不一样,需要做区分。

解决办法:

在<ion-content>里层包一个div标签,在div上使用ng-if做区分,如下:

<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:上拉分页加载时,触发多次加载请求,

解决办法:网上很多人说加上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); 
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容