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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
Jun 05 Javascript
jquery lazyload延迟加载技术的实现原理分析
Jan 24 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
JavaScript入门基础
Aug 12 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue webpack实用技巧总结
Apr 24 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 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
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
showModelessDialog()使用详解
2006/09/07 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
JS 显示当前日期与时间的代码
2010/03/24 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
fckeditor部署到weblogic出现xml无法读取及样式不能显示问题的解决方法
2017/03/24 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
《将心比心》教学反思
2014/04/08 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
爱的教育读书笔记
2015/06/26 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python