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