Question

我正在尝试将无限滚动放到我的应用程序上，该应用程序从https://developer.yummly.com/documentation提取数据。最大结果的值当前设置为50。我希望每次到达滚动点时它都会增加相同的数量。

我的api电话从这里开始

 perpage: number = 50;

 loadCategory(category:any, start:number=0) {
    var url = "http://api.yummly.com/v1/api/recipes?_app_id=...&_app_key=...";

    if (categoryCache[category.categoryId]) {
      // already loaded data
      return Promise.resolve(categoryCache[category.categoryId]);
    }

    // don't have the data yet
    return new Promise(resolve => {
      // We're using Angular HTTP provider to request the data,
      // then on the response, it'll map the JSON data to a parsed JS object.
      // Next, we process the data and resolve the promise with the new data.
      var params = "";

      category.apiParams.forEach(paramPair => {
        params += "&" + paramPair.key + '=' + paramPair.value;
      });

      this.http.get(url + params + "&maxResult=" + this.perpage + "&start=" + start)
        .map(res => res.json())
        .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          console.log(data);
          console.log(this.http.get);
          categoryCache[category.categoryId] = data.matches;
          resolve(categoryCache[category.categoryId]);
        });
    });
 }

然后我的页面.ts文件是

  public api:  any = [];
  private start:number=50;

  loadRecipes(){
    return new Promise(resolve => {
      this.apiAuthentication.loadCategory(this.navParams.data)
      .then(data => {
        this.api = data;
      });
    }) 
  } 


  doInfinite(infiniteScroll:any) {

    setTimeout(() => {
      // Text goes here
      this.start = 100;
      infiniteScroll.complete();
    }, 500);
  }

如果有人能提供帮助那就太棒了。

Answer 1

您必须在loadRecipies内致电doinfinite() 对于您的分页，请将loadRecipies更改为：

api:any[]=[];//initialize to empty array
loadRecipes(scroll?:any,start?:any){
    return new Promise(resolve => {
      this.apiAuthentication.loadCategory(this.navParams.data,start)
      .then(data => {
        this.api.push(data);
        if(scroll){
          scroll.complete()
        }
      },err=>{
        if(scroll){
          scroll.complete()
        }
      });
    }) 
  }

在doInfinite，

 doInfinite(infiniteScroll:any) {
    this.loadRecipies(infiniteScroll,this.start);
    this.start+=50;
  }

离子2：无限滚动不起作用

1 个答案: