[ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

1.将tab1.html的代码改为如下：

<ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-slide-box show-pager="false" on-slide-changed="slideChanged($index)">
      <ion-slide ng-repeat="slide in slides">
        <div class="list has-header">
          <a ng-repeat="item in items" class="item item-thumbnail-right item-text-wrap" href="#">
            <img ng-src="{{imgUrl+item.img}}" width="30" height="30" alt="">
            <h3>{{item.title}}</h3>
            <p>{{item.description | substring:item.description}}</p>
          </a>
        </div>
        <ion-infinite-scroll ng-if="!hasmore" on-infinite="loadMore()" distance="1%">
        </ion-infinite-scroll>
      </ion-slide>
    </ion-slide-box>
</ion-content>

2.controller.js层Tab1Ctrl的实现

.controller('Tab1Ctrl', function ($scope, Tab1Service,  $ionicSlideBoxDelegate, $ionicTabsDelegate) {
 
    var page = 1,isLock=false;
    $scope.items = [];
    $scope.loadMore = function () {
        if(isLock)return;
        isLock=true;
        Tab1Service.getList(classify[0].url, page).success(function (response) {
            console.log(page)
            if (response.tngou.length == 0) {
                $scope.hasmore = true;
                return;
            }
            page++;
            $scope.items = $scope.items.concat(response.tngou);
        }).finally(function (error) {
            isLock = false;
            $scope.$broadcast('scroll.infiniteScrollComplete');
            $scope.$broadcast('scroll.refreshComplete');
        });
    };
    $scope.doRefresh = function () {
        page = 1;
        $scope.items = [];
        $scope.loadMore();
    }
})

3.代码解释

上面菜单部分使用了Tab组建，中间的列表部分使用SlideBox，并不存在任何嵌套，只是在各自选择的时候做一些处理。

• ion-refresher标签：下拉刷新的效果，下拉时触发doRefresh。
• ion-infinite-scroll标签：上拉加载的效果 。
• islock：锁，防止在网络慢的时候多次请求。
• hasmore：在最后一页的时候禁止触发加载更多。