问题描述：
Ionic 中ion-slides ion-slide-pages 内嵌 ion-infinite-scroll，在切换页面时不起作用，在底部留白。
原因分析：
主页代码如下

1
2
3
4
5
6
7
8
9
<ion-content scroll="false" class="has-header has-footer">
    <ion-slides slider="slider" ion-slides-tabs 
    slide-tabs-scrollable="true" options="{initialSlide:0}">
        <ion-slide-page  ng-repeat="item in items track by $index" 
        ion-slide-tab-label="{{item.name}}">
            <pages data="item"></pages>
        </ion-slide-page>
    </ion-slides>
</ion-content>

pages指令模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ion-content class="has-footer">
    <ion-refresher ng-if="isRefresher" pulling-text="下拉刷新" 
    on-refresh="doRefresh()"></ion-refresher>
    <div>
        <your-package-pages ng-repeat="data in totalData track by $index" 
        your-item-data="data"></your-package-pages>
    </div>
    <ion-infinite-scroll
            ng-if="isInfiniteScroll"
        on-infinite="loadMore()"
        immediate-check="false"
        distance="1%">
    </ion-infinite-scroll>
</ion-content>

每次slide切换会触发网络请求，在pages指令中请求数据，封装数据
ion-infinite-scroll 每次加载完成都应该发送一个广播

1
$scope.$broadcast('scroll.infiniteScrollComplete');

而其他页面
而在切换页面之前，并不知道，infiniteScroll是否加载完成，所以需要在切换页面过后
第一件事就是发送加载已完成广播

1
2
3
4
5
6
 $scope.$on('homeCate', function (event, data) {
    if ($scope.ids == data){
        // 相对于重置refreash和infiniteScroll
        $scope.$broadcast('scroll.infiniteScrollComplete');
        $scope.$broadcast('scroll.refreshComplete');
}