ion-infinite-scroll实现ionic3上拉分页加载更多

1.ionic 在需要上拉加载的页面中加入ion-infinite-scroll


http://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/


<ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
<ion-infinite-scroll-content
loadingSpinner="bubbles"
loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>



ion-infinite-scroll事件： 

 ionInfinite 

 (ionInfinite)="doInfinite($event)"


ion-infinite-scroll属性： 


threshold 距离底部的距离  
enable  是否何用
position:button  显示的位置 可选top


ion-infinite-scroll-content的属性： 


loadingSpinner  配置上拉加载更多的图标
loadingText 上拉加载显示的文字


http://ionicframework.com/docs/api/components/spinner/Spinner/




2.对应页面的业务逻辑ts文件中写上拉更新的方法



doInfinite(infiniteScroll){
      console.log(infiniteScroll);

       infiniteScroll.complete();  
}




重要方法：


infiniteScroll.complete();   //当数据请求完成调用


if (this.items.length > 90) {
         infiniteScroll.enable(false);   //没有数据的时候隐藏 ion-infinate-scroll
}