ion-infinite-scroll实现上拉刷新

最新推荐文章于 2022-11-16 10:08:53 发布

玩家六

最新推荐文章于 2022-11-16 10:08:53 发布

阅读量1k

点赞数

分类专栏： javaweb 文章标签： html

本文链接：https://blog.csdn.net/jslcylcy/article/details/76633635

版权

javaweb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

直接上代码
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();
    }