ion-content中存在ion-list,在ion-list外固定其他控件位置不滚动

重点

<ion-content scroll="false">
然后在 <ion-list> 外包裹   <ion-scroll style="height: 100%;">， 此处的height必须有，不然滚动尺寸有问题。
单此时如果底部有tabs，会发现list最后一行被tabs遮住了，一个偷懒的方法就是启用infinite-scroll，把最后一行进行填充，就是增加 <ion-infinite-scroll on-infinite="loadMore()"></ion-infinite-scroll>。
这时list拉到底会有个loading的icon出现，为了不让这个icon出现，可以设置ion-infinite-scroll的spinner="xxx"任意名字，但这样会js出异常，报找不到对应的spinner，那么好点一点的方法是实现on-infinite="loadMore()"，在loadMore(）中直接让infinite scroll结束

$scope.loadMore = function(){
    $scope.$broadcast('scroll.infiniteScrollComplete');
};

<ion-view view-title="Chats">
    <ion-content scroll="false">
        <div>
            2015-11-11
        </div>
        <div class="button-bar">
            <a class="button">First</a>
            <a class="button">Second</a>
            <a class="button">Third</a>
        </div>
        <ion-scroll style="height: 100%;">
            <ion-refresher on-refresh="doRefresh()"></ion-refresher>
            <ion-list>
                <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats"
                          type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
                    <img ng-src="{{chat.face}}">

                    <h2>{{chat.name}}</h2>

                    <p>{{chat.lastText}}</p>
                    <i class="icon ion-chevron-right icon-accessory"></i>

                    <ion-option-button class="button-assertive" ng-click="remove(chat)">
                        Delete
                    </ion-option-button>
                </ion-item>
            </ion-list>
            <ion-infinite-scroll on-infinite="loadMore()"></ion-infinite-scroll>
        </ion-scroll>
    </ion-content>
</ion-view>