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

来源：互联网发布：mac照片如何归类编辑：程序博客网时间：2024/04/30 07:17

重点

<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>

0 2