ionic中的下拉刷新和滚动刷新---ion-infinite-scroll，ion-refresh

最新推荐文章于 2021-06-04 00:39:12 发布

weixin_33895016

最新推荐文章于 2021-06-04 00:39:12 发布

阅读量196

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1416844/blog/466360

版权

2019独角兽企业重金招聘Python工程师标准>>>

http://www.cnblogs.com/xuan-0107/p/4428844.html

下拉刷新

    <ion-content>
        <ion-refresher
            pulling-text="Pull to refresh..."
            on-refresh="doRefresh()">
        </ion-refresher>
        <ul class="list">
            <li class="item" ng-repeat="item in items">{{item}}</li>
        </ul>
    </ion-content>

下拉刷新完毕也要广播

// 下拉刷新方法
$scope.doRefresh = function () {
    var promise = TodoListFty.getTodoLists();
    promise.then(
        function (result) {
            console.log(result);
            $scope.todoListData = result;
        },
        function (reason) {
            console.log("获取待办任务失败" + reason);
        }
    ).finally(function () {
            // 刷新完毕要广播刷新完毕事件
            $scope.$broadcast('scroll.refreshComplete');
        });
};

滚动刷新

      <ion-infinite-scroll ng-if="!noMoreItemsAvailable" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

地方滚动刷新完成的时候也要广播

.controller('MyCtrl', function($scope) {
  $scope.noMoreItemsAvailable = false;
  
  $scope.loadMore = function() {
    $scope.items.push({ id: $scope.items.length});
   
    if ( $scope.items.length == 99 ) {
      $scope.noMoreItemsAvailable = true;
    }
    $scope.$broadcast('scroll.infiniteScrollComplete');
  };
  
  $scope.items = [];
  
});