Implementation method of app pull up loading and updating data based on angular+ionic

Step 1, first of all, needs to be in <ion-content> Add labels to labels <ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>

The attribute explanation inside,

ng-if values Boolean, if true, pull-up events can be triggered
Events triggered when on-infinite pulls up
The bottom of the distance list scrolls to the distance where a pull-up event can be triggered, defaulting to 1%
Load icon displayed when icon is loaded, default to 'ion-loading-d'

Step 2: Write in the controller

$scope.hasmore = true; 

Defines an object that triggers an event

Then write the loadMore event

// Pull-up event  
    $scope.loadMore = function () { 
      $scope.dataValue.page++; 
      loadajax(); 
    } 

Then write the loadajax event

function loadajax() { 
      var dataValue = $scope.dataValue; 
      var ip = "http://" + $rootScope.form.ip + "/appGetpage"; 
      var req = { 
        method: 'POST', // Mode of request  
        url: ip, // Requested address  
        headers: { 
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
          'Accept': '*/*' 
        }, // The header of the request, if it can not be written by default  
        timeout: 5000, // Timeout, not yet tested  
        data: "value=" + JSON.stringify(dataValue) //message  Must be a=b&c=d Format of  
      }; 
      $http(req).success(function (data) { 
        if (data.data.length == 0) { 
          $scope.hasmore = false;// Here, it is judged whether data can still be obtained, and if no data can be obtained, the loading event will not be triggered again  
          return; 
        } 
        $scope.items = $scope.items.concat(data.data); 
      }).error(function () { 
        console.log("err"); 
      }).finally(function () { 
        $scope.$broadcast('scroll.infiniteScrollComplete');// This is to tell ionic When the data update is completed, the update event can be triggered again  
        $scope.$broadcast('scroll.refreshComplete'); 
      }); 
    }