ionic1 下拉刷新 上拉加载 功能

html页面如下

 <ion-content>
    <ion-refresher pulling-text="刷新" on-refresh="search()"></ion-refresher>
    <!---首页内容-->
    <div>
      <ul>
        <li ng-repeat="position in positions">内容</li>
      </ul>
    </div>
    <!--首页内容结束-->
    <ion-infinite-scroll ng-if="searchModel.offset<=(positions.count-10)" on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>
  </ion-content>

js如下

angular.module('app')
  .controller('IndexCtrl', function($scope, positionService) {
    $scope.searchModel = {
offset: 0
}
//下拉刷新
$scope.search = function(){
$scope.searchModel.offset = 0;
positionService.getPositions($scope.searchModel)
.then(function(response){
$scope.positions = response.data;
},function(error){
})
}
//上拉加载
$scope.loadMore = function(){
$scope.searchModel.offset += 10;
       positionService.getPositions($scope.searchModel)
.then(function(response){
$scope.positions = $scope.positions.concat(response.data);
},function(error){
})

}
 })

具体用法参考   http://www.ionic.wang/js_doc-index-id-25.html      http://www.ionic.wang/js_doc-index-id-29.html

原文地址:https://www.cnblogs.com/luffyc/p/7218016.html