ng中infinite-scroll插件无限请求问题解决方法
来源:互联网 发布:那个基金软件好 编辑:程序博客网 时间:2024/05/25 21:34
在使用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,这样就可以实现每次分页的时候在上一次请求完成之后才会发起下一次的请求。
阅读全文
0 0
- ng中infinite-scroll插件无限请求问题解决方法
- 无限滚动插件infinite-scroll介绍
- 【无限滚动加载数据】—infinite-scroll插件的使用
- 【无限滚动加载数据】—infinite-scroll插件的使用
- jquery插件(二):Infinite Scroll–无限分页
- 【无限滚动加载数据】—infinite-scroll插件的使用
- infinite-scroll插件使用
- Infinite Scroll–无限分页
- 关于angular瀑布流插件ng-infinite-scroll.min.js遇到一个奇葩问题
- 【无限滚动加载数据】—infinite-scroll插件的使用---------下拉加载数据、无线滚动
- 小白入门---Vue无限滚动(vue-infinite-scroll)
- jQuery Infinite Ajax Scroll(ias) 分页插件介绍
- android scroll view infinite scroll
- Infinite Ajax Scroll (IAS)
- ionic 上拉刷新 ion-infinite-scroll 自动调用多次问题解决
- infinite-scroll 滚动不停止
- jquery jquery插件infinite scroll <%each list as goods%> 模板 产品循环
- (vue.js)vue 父组件使用keep-alive和infinite-scroll导致在子组件触发父组件的infinite-scroll方法
- QT屏幕保护程序二
- 这个房间有点温馨--幸福梦负氧离子墙衣
- android自定义布局中的平滑移动(转)
- UVA-524 素数环 回溯
- Ubuntu安装NVIDIA驱动失败解决:登陆界面重复登录
- ng中infinite-scroll插件无限请求问题解决方法
- ajax如何请求本地txt文件时
- 看了一系列关于 JVM 的文章,非常好,记录一下地址
- 用java写邮箱发送的小案例
- 小程序
- MFC3-图像边缘处理
- 多态性
- top K问题
- NY116