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性能陷阱小结(附实例说明)
Dec 28 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
使用JS+plupload直接批量上传图片到又拍云
Dec 01 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jQuery中的基本选择器用法学习教程
Apr 14 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
实现vuex原理的示例
Oct 21 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
discuz表情的JS提取方法分析
2017/03/22 Javascript
JavaScript初学者必看“new”
2017/06/12 Javascript
angular $watch 一个变量的变化(实例讲解)
2017/08/02 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
2017/10/31 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
2019/09/29 Javascript
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python网络编程详解
2017/10/31 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
零基础学python应该从哪里入手
2020/08/11 Python
难忘的一天教学反思
2014/04/30 职场文书
医学检验专业自荐信
2014/09/18 职场文书
学生病假条范文
2015/08/17 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android