ion-infinite-scroll实现上拉刷新

来源：互联网发布：淘宝同行恶意刷退款率编辑：程序博客网时间：2024/05/21 14:09

直接上代码
html：

<ion-content><ion-infinite-scroll ng-if="moredata" on-infinite="loadMore()" distance="5%" style="height: 1px;" ></ion-infinite-scroll> </ion-content>

ion-infinite-scroll要写在ion-content才有效 moredata 控制是否能继续像服务器请求数据 loadMore方法为用户每次加载到页脚时触发的方法

controller中代码：

    $scope.moredata = true;    var page = 1;    var pageSize = 10;    $scope.models= [];    function loadData(){        $http({            url:,            params : {                "page" : page,                "rows" : pageSize,},            method:"get"        }).success(function(data) {            for(i in data.rows){                $scope.models.push(data.rows[i]);            }            if(data.total>page*pageSize){                $scope.moredata = true;            }else{                $scope.moredata = false;            }            page++;            $scope.$broadcast('scroll.infiniteScrollComplete');        }).error(function() {            alert("服务器错误");            $scope.$broadcast('scroll.infiniteScrollComplete');        });    }    $scope.loadMore = function(){        loadData();    }

注意一定要加$scope.$broadcast('scroll.infiniteScrollComplete'); 才能使得上拉加载有效果

阅读全文

0 0