首页 > 代码库 > ionic 下拉刷新,上拉加载更多

ionic 下拉刷新,上拉加载更多

1)下拉刷新用的是 ion-refresher,使用示例如下:

<ion-refresher
     pulling-text="Pull to refresh..."
     on-refresh="doRefresh()">
</ion-refresher>

详情说明请看官方文档:http://ionicframework.com/docs/api/directive/ionRefresher/

刷新后需要收起 loading 动画

 

$scope.$broadcast(‘scroll.refreshComplete‘);  

 

2)上拉加载用的是 ion-infinite-scroll,使用示例如下:

<ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
</ion-infinite-scroll>

详情说明请看官方文档:http://ionicframework.com/docs/api/directive/ionInfiniteScroll/

加载完之后需要收起 loading 动画

 

$scope.$broadcast(‘scroll.infiniteScrollComplete‘);

 

 

 

PS:需要注意的是这两个功能标签都是需要写在 ion-content 标签里的,不然会出错

ionic 下拉刷新,上拉加载更多