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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
input、button的不同type值在ajax提交表单时导致的陷阱
Feb 24 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Vue2.0组件间数据传递示例
Mar 07 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
JavaScript设计模式之职责链模式应用示例
Aug 07 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 Javascript
在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
cmd下运行php脚本
2008/11/25 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
2018/09/12 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
[01:24:51]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第二场
2014/05/26 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
Python数据结构之翻转链表
2017/02/25 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python如何对链表操作
2020/10/10 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
市场部专员岗位职责
2013/11/30 职场文书
李培根演讲稿
2014/05/22 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
用Python实现屏幕截图详解
2022/01/22 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript