ionic 下拉刷新，上拉加载更多

1）下拉刷新用的是 ion-refresher，使用示例如下：

<ion-refresher
     pulling-text="Pull to refresh..."
     on-refresh="doRefresh()">
</ion-refresher>

详情说明请看官方文档：http://ionicframework.com/docs/api/directive/ionRefresher/

刷新后需要收起 loading 动画

$scope.$broadcast('scroll.refreshComplete');  

2）上拉加载用的是 ion-infinite-scroll，使用示例如下：

<ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
</ion-infinite-scroll>

详情说明请看官方文档：http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

加载完之后需要收起 loading 动画

$scope.$broadcast('scroll.infiniteScrollComplete');

PS:需要注意的是这两个功能标签都是需要写在 ion-content 标签里的，不然会出错

来一个完整的demo：

html部分

<ion-view view-title="{{title}}" id="category">
  <ion-nav-buttons side="left" class="has-header">
    <button class="button button-icon icon ion-ios-arrow-back" ui-sref="page6"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right" class="has-header">
    <button class="button button-icon icon ion-android-home" ui-sref="page6"></button>
  </ion-nav-buttons>
  <ion-content padding="true" class="has-header">
    <ion-refresher
      pulling-text="Pull to refresh..."
      on-refresh="doRefresh()">
    </ion-refresher>
    <ion-list id="page5-list5">
      <ion-item ng-repeat="item in lists" class="item-grid-two" id="page5-list-item{{item.product_id}}">
          <div class="pic">
            <a href="/wap/product-{{item.product_id}}.html">
              <img src="http://pics.imopark.com/{{item.default_image}}"></a><i></i>
          </div>
          <div class="product-info">
            <div class="p-price-bar">
              <span class="fl p-price"> <em class="price">￥{{item.price}}</em>
              </span>
              <span class="fl p-discount"> <em class="">{{item.zk}}折</em>
              </span>
              <span class="fr p-sale-num">已售 {{item.codersum}}</span>
            </div>
            <h2 class="p-name">
              <a href="/wap/product-{{item.product_id}}.html" class="split">{{item.name}}</a>
            </h2>
          </div>
      </ion-item>
    </ion-list>
    <ion-infinite-scroll
      ng-if="can_loadmore()"
      on-infinite="loadMore()"
      distance="1%">
    </ion-infinite-scroll>
  </ion-content>
</ion-view>

js部分

angular.module('app.controllers', [])
   
.controller('categoryCtrl', ['$scope', '$http', '$stateParams','$ionicLoading', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $http, $stateParams, $ionicLoading) {
    var _arguments     = arguments;
    $scope.lists       = [];
    var page_no           = 1;
    var page_size    = 20;
    var page_total    = 0;

    $scope.can_loadmore = function(){
        return page_no<page_total;
    };

    $scope.$on('$ionicView.loaded', function(event, data) {
        page_no     = 1;
        get_goods_list(_arguments, {'cat_id':$stateParams.cat_id, 'page_no':page_no, 'page_size':page_size},function(res){
            page_total = res.pager.total;
        });
    });

    $scope.doRefresh = function(){
        page_no     = 1;
        get_goods_list(_arguments, {'cat_id':$stateParams.cat_id, 'page_no':page_no, 'page_size':page_size},function(){
            $scope.$broadcast('scroll.refreshComplete');
        });
    };

    $scope.loadMore = function(){
        page_no     += 1;
        get_goods_list(_arguments, {'cat_id':$stateParams.cat_id, 'page_no':page_no, 'page_size':page_size},function(){
            $scope.$broadcast('scroll.infiniteScrollComplete');
        });
    };
}])