如何在 Ionic 3 中添加和集成拉动刷新功能

Question

我正在开发一个与 wordpress 集成的 Ionic App，并使用 REST API (JSON) 提取数据

我的一个 .ts 文件中有以下代码，可以完美地执行无限滚动

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

    this.wordpressService.getRecentPosts(this.categoryId, 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;
    })
  }

我感觉应该在下面的 sn-p 中添加一些代码来执行拉动刷新功能并能够加载新帖子

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

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

编辑 这是我的提供者/服务的样子

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
export const WORDPRESS_URL = 'http://www.example.com/';
export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/forkJoin';


@Injectable()
export class WordpressService {
  constructor(public http: Http){}

  getRecentPosts(categoryId:number, page:number = 1){
    //if we want to query posts by category
    let category_url = categoryId? ("&categories=" + categoryId): "";

    return this.http.get(
      WORDPRESS_REST_API_URL
      + 'posts?page=' + page
      + category_url)
    .map(res => res.json());
  }

  getRecentFewPosts(categoryId:number, page:number = 1){
    //if we want to query posts by category
    let category_url = categoryId? ("&categories=" + categoryId): "";

    return this.http.get(
      WORDPRESS_REST_API_URL
      + 'posts?per_page=5&page=' + page
      + category_url)
    .map(res => res.json());
  }

  getRecentPostsByTag(tagId:number, page:number = 1){
    //if we want to query posts by tag
    let tag_url = tagId? ("&tags=" + tagId): "";

    return this.http.get(
      WORDPRESS_REST_API_URL
      + 'posts?page=' + page
      + tag_url)
    .map(res => res.json());
  }

  getComments(postId:number, page:number = 1){
    return this.http.get(
      WORDPRESS_REST_API_URL
      + "comments?post=" + postId
      + '&page=' + page)
    .map(res => res.json());
  }

  getAuthor(author){
    return this.http.get(WORDPRESS_REST_API_URL + "users/" + author)
    .map(res => res.json());
  }

  getPostCategories(post){
    let observableBatch = [];

    post.categories.forEach(category => {
      observableBatch.push(this.getCategory(category));
    });

    return Observable.forkJoin(observableBatch);
  }

  getCategory(category){
    return this.http.get(WORDPRESS_REST_API_URL + "categories/" + category)
    .map(res => res.json());
  }

  createComment(postId, user, comment){
    let header: Headers = new Headers();
    header.append('Authorization', 'Bearer ' + user.token);

    return this.http.post(WORDPRESS_REST_API_URL + "comments?token=" + user.token, {
      author_name: user.displayname,
      author_email: user.email,
      post: postId,
      content: comment
    },{ headers: header })
    .map(res => res.json());
  }
}

任何帮助将不胜感激。谢谢

Answer 1

您对使用刷新组件是正确的。视图调用 doRefresh 方法，我们获取数据，完成后，我们在刷新对象上调用 complete() 方法。

.ts

  import { Storage } from '@ionic/storage';
    items: any;
      constructor(public navCtrl: NavController, public storage: Storage) {
        this.doRefresh();
      }
        doRefresh(refresher){
            this.storage.get('myStore').then((data) => {
              this.items = data;

              if(refresher)
                 refresher.complete();
            }); 
        }

HTML

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