360SDN.COM

首页/Ionic/列表

Ionic3如何下拉刷新和上拉加载(ion-refresher,ion-infinite-scroll)

来源:  2018-04-13 08:37:00    评论:0点击:

Ionic3上拉刷新==>

Html:

 

      <ion-content style="background-color:white">  
        <ion-refresher (ionRefresh)="doRefresh($event)">  
            <ion-refresher-content pullingIcon="arrow-dropdown"  pullingText="Pull to refresh"  refreshingSpinner="circles"  refreshingText="Refreshing...">  
             </ion-refresher-content>  
        </ion-refresher>  



TypeScript:

 

     //下拉刷新  
     doRefresh(refresher) {  
         //console.log('Begin async operation', refresher);  
       setTimeout(() => {  
           this.BindUserModule();   //绑定方法  
        console.log('Async operation has ended');  
       refresher.complete();  
      }, 1000);  
    }  


上拉刷新==>

HTML:

 

    <ion-content>  
      
     <ion-list>  
       <ion-item *ngFor="let i of items">{{i}}</ion-item>  
     </ion-list>  
      
      <ion-infinite-scroll (ionInfinite)="doInfinite($event)">  
        <ion-infinite-scroll-content  
          loadingSpinner="bubbles"  
          loadingText="Loading more data...">  
        </ion-infinite-scroll-content>  
      </ion-infinite-scroll>  
      
    </ion-content>  


TypeScript:
 

    @Component({...})  
    export class NewsFeedPage {  
      items = [];  
      
      constructor() {  
        for (let i = 0; i < 30; i++) {  
          this.items.push( this.items.length );  
        }  
      }  
      
      doInfinite(infiniteScroll) {  
        console.log('Begin async operation');  
      
        setTimeout(() => {  
          for (let i = 0; i < 30; i++) {  
            this.items.push( this.items.length );  
          }  
      
          console.log('Async operation has ended');  
          infiniteScroll.complete();  
        }, 500);  
      }  
      
    }
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权