ng中infinite-scroll插件无限请求问题解决方法

港控/mmm° 2022-06-09 01:53 582阅读 0赞

在使用angular开发移动端页面的童鞋们，有时要做到上拉加载，虽然jquery有很多插件可以满足这个效果，但是我们要知道使用angualr项目就尽量不要再使用jquery，因此ng的infinite-scroll上拉加载就很有作用了，但是使用的小伙伴遇到无限请求怎么办呢？

最近我也遇到了这个问题，解决方案如下：

> 我们通过infinite-scroll的自带属性infinite-scroll-disabled就可以解决

**1、html页面中加入infinite-scroll-disabled属性**

<div  infinite-scroll-disabled="ifReq" infinite-scroll='indexLoadMore()' infinite-scroll-distance='0'>
    //infinite-scroll-disabled 表示是否禁用infinite-scroll，true表示禁用，false表示不禁用
    //infinite-scroll 表示数据请求的方法
    //infinite-scroll-distance 表示触发请求滚动条距离页面底部的距离

**2、angularjs处理中加入**

$scope.indexLoadMore = function(reqUrl,method,page,totalPage) {//分页加载数据方法
            indexDataLoadFun(reqUrl,method,totalPage);//数据加载方法
        };
    
        var indexDataLoadFun = function(reqUrl,method,totalPage){//首页加载方法独立出来，进行数据的分页加载
            //分页总数
    
            if(totalPage > currentPage){//开始请求后台数据
                if ($scope.ifReq) return;//判断当前数据是否请求完成
                    $scope.ifReq = true;
                    currentPage = currentPage +1;//分页页码数+1
                    $http({
                        method:method ,
                        data:{
                            "pageNumber": currentPage
                        },
                        url:reqUrl
                    }).then(function successCallback(response) {                        
                       //请求成功，开始操作数据
                       $scope.ifReq = false;
                    }, function errorCallback(response) {
                        // 请求失败执行代码
                        $scope.ifReq = false;
                        currentPage = currentPage - 1;
                        $scope.loadingTitle = "出错啦，请稍后重试~";
                    });
                }
            else{
            console.log("没有数据了")
            }
    
        };

**3、原理如下**

> 通过控制ifReq的布尔值，来决定是否禁用infinite-scroll，这样就可以实现每次分页的时候在上一次请求完成之后才会发起下一次的请求。