美文网首页
ionic3下拉刷新,上拉加载更多

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

作者: 没有昵_称 | 来源:发表于2017-10-24 09:26 被阅读860次

下拉刷新

<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();//停止上拉加载

}

相关文章

网友评论

      本文标题:ionic3下拉刷新,上拉加载更多

      本文链接:https://www.haomeiwen.com/subject/lmftpxtx.html