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

下拉刷新

<ion-refresher (ionRefresh)='doRefresh($event)'>

     <ion-refresher-content

        pullingIcon="arrow-dropdown"

        pullingText="下拉刷新"

       refreshingSpinner="circles"

       refreshingText="...">

   </ion-refresher-content>

</ion-refresher>

TypeScript:

import{Component}from'@angular/core';

import{IonicPage,NavController,NavParams}from'ionic-angular';

@IonicPage()

@Component({

selector:'page-product-list',

templateUrl:'product-list.html',

})

export class ProductListPage{

constructor(publicnavCtrl:NavController,publicnavParams:NavParams) {

}

ionViewDidLoad() {

this.getFavoritesItems();

}

doRefresh(refresher){

setTimeout(()=>{

refresher.complete(); //停止下拉刷新

},2000)

}

}

上拉加载更多

<ion-infinite-scroll(ionInfinite)="doInfinite($event)">

     <ion-infinite-scroll-content

             loadingSpinner="bubbles"

              loadingText="加载中...">

    </ion-infinite-scroll-content>

</ion-infinite-scroll>

TypeScript:

doInfinite(infiniteScroll){

infiniteScroll.complete();//停止上拉加载

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容