AngularJS上拉加载问题解决方法


Posted in Javascript onMay 23, 2016

项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找另外7条数据。但实际情形是不确定的,在服务端控制台(见图2)可看到begno一直到了126,也就是相当于客户端往服务端请求了127次,这是一个令人无法忍受的结果。

AngularJS上拉加载问题解决方法 

图1 客户端搜索栏

AngularJS上拉加载问题解决方法

图2 服务端控制台

可以断定是客户端的业务逻辑出现了问题。返回到客户端,查看源码逻辑,修改如下:

控制器

$scope.medsearchMore = function() { 
console.log("上拉加载....." + isfinished); 
if (isfinished == 0) { 
begno += pcnt; 
var data = { 
"begno" : begno, // 起始序号 
"pagenum" : pagenum, // 每页返回条数 
"searchby": searchby 
}; 
if (searchType == 1) { 
data.classid = searchKey; 
console.log(data.classid); //--------1 
appCallServer($http, "9002", data, function(data) { 
console.log("下拉刷新查询结果rootScope.med:" + JSON.stringify(data.data)); 
for (var i = 0; i < data.pcnt; i++) { 
$rootScope.med.push(data.data[i]); 
} 
// 更新状态 
isfinished = data.isfinished; 
// 药品已查询完毕 
if(isfinished == '1'){ 
$scope.noMore = true; 
}else{ 
$scope.noMore = false; 
} 
pcnt = data.pcnt; 
}, function(data) { 
// 药品已查询完毕 
$scope.noMore = true; 
$ionicLoading.show({ 
template: data.errtext 
}); 
$timeout(function() { 
$ionicLoading.hide(); 
}, 1200); 
}); 
} 
} else { 
// 药品已查询完毕 
$scope.noMore = true; 
} 
$timeout(function() { 
$scope.$broadcast('scroll.infiniteScrollComplete'); 
}, 1200); 
};

视图

<!--当用户到达页脚或页脚附近时,ion-infinite-scroll指令允许你调用一个函数 。当用户滚动的距离超出底部的内容时,就会触发你指定的on-infinite--> 
<!--当没有更多数据加载时,就可以用一个简单的方法阻止无限滚动,那就是angular的ng-if指令--> 
<!--设置noMore初始值为true首次即点击分类查询时不进行下拉加载操作--> 
<ion-infinite-scroll on-infinite="medsearchMore()" distance="0.01%" icon="ion-loading-c"></ion-infinite-scroll> 
<div class="item" ng-if="noMore" align="center"><p>没有更多的药品了</p></div>

经过以上修改,可以实现避免不必要的请求。

AngularJS上拉加载问题解决方法

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
Feb 24 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
原生js实现轮播图
Feb 27 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
在IE8上JS实现combobox支持拼音检索功能
May 23 #Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 #Javascript
用js实现放大镜的效果的简单实例
May 23 #Javascript
jQuery实现摸拟alert提示框
May 22 #Javascript
javascript实现标签切换代码示例
May 22 #Javascript
超实用的JavaScript代码段 附使用方法
May 22 #Javascript
JavaScript数组合并的多种方法
May 22 #Javascript
You might like
用PHP生成静态HTML速度快类库
2007/03/18 PHP
PHP处理会话函数大总结
2015/08/05 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
关于js datetime的那点事
2011/11/15 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
js模拟淘宝网的多级选择菜单实现方法
2015/08/18 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python中pycurl库的用法实例
2014/09/30 Python
python3中int(整型)的使用教程
2017/03/23 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
python数据归一化及三种方法详解
2019/08/06 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
论文诚信承诺书
2014/05/23 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
Oracle用户管理及赋权
2022/04/24 Oracle