<ion-view view-title="消息通知">
  <ion-content class="padding">
 <!-- <ion-refresher> 下拉刷新指令  -->
  <ion-refresher pulling-text="Pull to refresh" on-refresh="vm.doRefresh()"></ion-refresher>
    <div class="list card" ng-repeat="message in vm.messages" >
      <div class="item item-divider item-icon-right">{{message.title}}
        <i class="icon" ng-click="vm.show(message)" ng-class="message.static?'ion-arrow-down-b':'ion-arrow-right-b'"></i></div>
      <div class="item item-body">
        <div>
          {{message.static?message.content:message.content.substr(0, 40)}}
        </div>
      </div>
    </div>
    <!-- ion-infinite-scroll 上拉加载数据指令 distance默认1% nf-if的值为false时,就禁止执行on-infinite  -->
    <ion-infinite-scroll ng-if="!vm.moredata" on-infinite="vm.loadMore()" distance="1%" ></ion-infinite-scroll>
  </ion-content>
</ion-view>

1. on-refresh 下拉触发的函数 函数执行结束之前必须广播下该事件结束 $scope.$broadcast('scroll.refreshComplete');

2. on-infinite 上拉触发的函数 同样需要广播事件结束 $scope.$broadcast('scroll.infiniteScrollComplete');



上拉刷新API:https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/#enable

下拉刷新API:https://ionicframework.com/docs/api/components/refresher/Refresher/

欢迎留言