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