将 Ionic 3 中的下拉刷新功能与 Wordpress 集成

Question

我正在开发一个使用 REST API v2 与 Wordpress 集成的 Ionic3 应用程序，我需要包含 pull to refresh 功能，但我不明白如何使用我的代码来实现。

这是检索我的帖子的函数

getPostsWordpress(){
    if(!(this.posts.length > 0)){
      let loading = this.loadingCtrl.create();
      loading.present();
      this.wordpressService.getRecentPostsWithSort(this.categoryId,this.sort) 
      .subscribe(data => {
        for(let post of data){
          post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
          this.posts.push(post);
        }
        loading.dismiss();
      });
    }
  }

...

doInfinite(infiniteScroll) {
    let page = (Math.ceil(this.posts.length/10)) + 1;
    console.log("PAGE_"+page)
    console.log("this.posts.length_"+this.posts.length)
    let loading = true;

    this.wordpressService.getRecentPostsWithSort(this.categoryId,this.sort, page)
    .subscribe(data => {
      for(let post of data){
        if(!loading){
          infiniteScroll.complete();

        }
        post.excerpt.rendered = post.excerpt.rendered.split('<a')[0] + "</p>";
        this.posts.push(post);
        loading = false;
      }
    }, err => {
      this.morePagesAvailable = false; 
    }) 
  }  

doInfinite 让我实现无限滚动，一切正常！

如何从 ionic 文档中集成 pull 以刷新？ 这是文档中的示例，我不明白如何在我的项目中使用它。

doRefresh(refresher) {
    console.log('Begin async operation', refresher);

    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }

有人可以帮助我吗？ 提前谢谢！

Answer 1

将此添加到您的 html

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

然后在你的刷新

doRefresh(refresher) {
console.log('Begin async operation', refresher);
//ur function e.g getPostWordPress()
setTimeout(() => {
  console.log('Async operation has ended');
  refresher.complete();
}, 2000);}