宝哥软件园

AngularJS上拉加载问题的解决方案

编辑:宝哥软件园 来源:互联网 时间:2021-10-29

项目总有问题(:)。在搜索字段输入关键词后(见图1),按照既定的业务逻辑,服务器在收到请求后应该先返回前7条数据,当客户端出现上拉加载时继续搜索其他7条数据。然而,实际情况并不确定。从服务器控制台(见图2),您可以看到begno已经达到126,这相当于从客户端到服务器的127个请求,这是一个无法容忍的结果。

图1客户端搜索栏。

图2服务器控制台。

可以断定客户端的业务逻辑有问题。回到客户端,检查源逻辑。修改如下:

控制器

$ scope . med searchmore=function(){ console . log('上拉加载. ')is finished);if(is finished==0){ begno=pcnt;Var data={'begno' : begno,//起始序列号' pagenum' : pagenum,//每页返回的文章数' search by ' : search by };if(search type==1){ data . class id=search key;console . log(data . class id);//-1 appcallserver ($ http,' 9002 ',data,function (data) {console.log('下拉刷新查询结果root scope . med : ' JSON . stringfy(data . data));for(var I=0;i data.pcntI){ $ rootscope . med . push(data . data[I]);}//更新状态is finish=data . is finish;//已查询药物是否(isfinished==' 1') {$ scope。nomore=true} else { $ scope.noMore=false} pcnt=data.pcnt},函数(数据){//已查询药品$ scope.noMore=true$ Ionicloloading . show({ template : data . err text });$ time out(function(){ $ ioncloloading . hide();}, 1200);});}} else {//已查询药物$ scope.noMore=true} $timeout(函数(){ $scope。$ broadcast(' scroll . infinismecrollcomplete ');}, 1200);};视角

!-ion-无限滚动指令允许您在用户到达页脚或页脚附近时调用函数。当用户滚动到底部的内容之外时,它将触发您指定的on-infinite -!-当没有更多数据要加载时,有一个简单的方法可以防止无限滚动,那就是angular ng-if指令-!-将noMore的初始值设置为true,即第一次点击分类查询时,不要执行下拉加载操作-Ion-infinite-scroll on-infinite=' med searchmore()' distance=' 0.01% ' icon=' Ion-loading-c '/Ion-infinite-scroll div class=' item ' ng-if=' no more ' align=' center ' p没有更多的药品/p/div经过上述修改后,可以避免不必要的请求。

更多资讯
游戏推荐
更多+