Angularjs Advanced (38) pull-up loading problem solving method

Source: Internet
Author: User

Angularjs Pull-up loading problem solving method

There is always a problem in the project: When a keyword is entered in the search field (see Figure 1), the first 7 data of the query is returned after the client receives the request, and then the last 7 data is searched for when a pull-up is loaded. But the actual situation is uncertain, in the server console (see Figure 2) can see Begno has been to 126, that is, the client to the server to request 127 times, this is an intolerable result.

Figure 1 Client Search bar

Figure 2 Server Console

It can be concluded that there is a problem with the client's business logic. Return to the client, view the source code logic, modify the following:

Controller

 $scope. MedsearchMore   = function () {Console.log ("pull-up loaded ..." + isfinished); if (isfinished = = 0) {Begno + = Pcnt;var data = {"Begno": Begno, Start sequence "Pagenum": pagenum,//number of return per page "Searchby": searchby};if (SearchType = = 1) {Data.classid = Searchkey;console.log (data . ClassID); --------1appCallServer ($http, "9002", data, function (data) {Console.log ("drop-down Refresh query result rootscope.med:" + json.stringify ( Data.data)); for (var i = 0; i < data.pcnt; i++) {$rootScope. Med.push (Data.data[i]);} Update Status isfinished = data.isfinished;//the drug has been searched if (isfinished = = ' 1 ') {$scope. NoMore = true;} else{$scope. NoMore = false;} pcnt = data.pcnt;}, function (data) {//medicine completed query $scope.nomore = true; $ionicLoading. Show ({template:data.errtext}); $ Timeout (function () {$ionicLoading. Hide ();}, 1200);});}} else {//medicine has been queried $scope.nomore = true;} $timeout (function () {$scope. $broadcast (' Scroll.infinitescrollcomplete ');}; 

View

<!--When a user arrives near a footer or footer, the Ion-infinite-scroll directive allows you to invoke a function. When the user scrolls beyond the bottom of the content, it will trigger the on-infinite-->< you specify!--when there is no more data loading, you can use a simple method to prevent infinite scrolling, that is angular ng-if command--><!-- Set the NoMore initial value to True the first click on a categorical query without a drop-down load Operation--><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 > No more drugs in the </p></div>

With the above modifications, you can avoid unnecessary requests.


Reference Documents

1.http://www.ionic.wang/js_doc-index-id-29.html

American and American pictures


Angularjs Advanced (38) pull-up loading problem solving method

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.