ng中infinite-scroll插件无限请求问题解决方法
2017-08-24 17:19
746 查看
在使用angular开发移动端页面的童鞋们,有时要做到上拉加载,虽然jquery有很多插件可以满足这个效果,但是我们要知道使用angualr项目就尽量不要再使用jquery,因此ng的infinite-scroll上拉加载就很有作用了,但是使用的小伙伴遇到无限请求怎么办呢?
最近我也遇到了这个问题,解决方案如下:
我们通过infinite-scroll的自带属性infinite-scroll-disabled就可以解决
1、html页面中加入infinite-scroll-disabled属性
2、angularjs处理中加入
3、原理如下
通过控制ifReq的布尔值,来决定是否禁用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,这样就可以实现每次分页的时候在上一次请求完成之后才会发起下一次的请求。
相关文章推荐
- jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
- 关于angular瀑布流插件ng-infinite-scroll.min.js遇到一个奇葩问题
- document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
- linux下tomcat部署get请求乱码问题解决方法
- 前端使用Jquery的getJSON方法,后台使用PHP,解决IE和火狐Firefox中存在的跨域ajax请求问题。
- WCF问题:“HTTP 错误 404.17 - Not Found 请求的内容似乎是脚本,因而将无法由静态文件处理程序来处理”解决方法
- jsp带中文请求参数的乱码问题的解决方法
- Eclipse安装插件 No repository found containing问题解决方法
- IIS7错误:“由于扩展配置问题而无法提供您请求的页面”解决方法
- Citrix服务器此时无法处理您启动该已发布应用程序的请求...问题的解决方法
- 关于Web请求中出现413 FULL head问题的解决方法
- 使用session时候,遇到的一个问题(请求解决方法)
- 开发托管ActiveX或第三方程序托管插件时调试问题解决方法
- jsp带中文请求参数的乱码问题的解决方法
- IIS出现提示“请求的资源在使用中”问题的解决方法
- 使用jqGrid表格插件不能翻页之解决问题的方法
- get请求中的中文乱码问题的解决方法
- document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
- “ASP.NET未被授权访问所请求的资源”问题的解决方法