[ionic开源项目教程]

第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：在最后一页的时候禁止触发加载更多。