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让我实现无限滚动，一切正常！

如何从离子文档中集成pull to refresh？这是来自文档的示例，我不明白如何在我的项目中使用它。

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

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

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

Answer 1

将此添加到ur 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);}

将Ionic 3中的pull to refresh特性与Wordpress集成在一起

1 个答案: