angular+ionic的app如何實現上拉加載更新數據

小編給大家分享一下angular+ionic的app如何實現上拉加載更新數據，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

第一步，首先需要在<ion-content>標簽里面加入標簽<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="5%"></ion-infinite-scroll>

里面的屬性解釋，

ng-if  值 布爾型，如果為true，則可以觸發上拉事件
on-infinite 上拉時觸發的事件
distance 列表底部滾動到可觸發上拉事件的距離，默認為1%
icon 加載時顯示的加載圖標，默認為 'ion-loading-d'

第二步：在控制器內書寫

$scope.hasmore = true;

定義可觸發事件的對象

然后書寫loadMore事件

//上拉事件 
    $scope.loadMore = function () { 
      $scope.dataValue.page++; 
      loadajax(); 
    }

然后寫loadajax事件

function loadajax() { 
      var dataValue = $scope.dataValue; 
      var ip = "http://" + $rootScope.form.ip + "/appGetpage"; 
      var req = { 
        method: 'POST', //請求的方式 
        url: ip, //請求的地址 
        headers: { 
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 
          'Accept': '*/*' 
        }, //請求的頭，如果默認可以不寫 
        timeout: 5000, //超時時間，還沒有測試 
        data: "value=" + JSON.stringify(dataValue) //message 必須是a=b&c=d的格式 
      }; 
      $http(req).success(function (data) { 
        if (data.data.length == 0) { 
          $scope.hasmore = false;//這里判斷是否還能獲取到數據，如果沒有獲取數據，則不再觸發加載事件 
          return; 
        } 
        $scope.items = $scope.items.concat(data.data); 
      }).error(function () { 
        console.log("err"); 
      }).finally(function () { 
        $scope.$broadcast('scroll.infiniteScrollComplete');//這里是告訴ionic更新數據完成，可以再次觸發更新事件 
        $scope.$broadcast('scroll.refreshComplete'); 
      }); 
    }

以上是“angular+ionic的app如何實現上拉加載更新數據”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！