mysql - 如何使用数据库中的数据创建 ionic 2 无限滚动

Question

我将从数据库中查询大约 500 个活跃用户。我正在使用 laravel 和 ionic 框架。

这是我使用 Laravel 的查询。

public function getUsers(Request $request) {
  $users = DB::table('users')->where('status', $request->status)->get();
  return Response::json($users);
}

这可能是我在 ionic 2 中的 .ts 代码

import { Component } from '@angular/core';
import { Http, Headers, RequestOptions } from "@angular/http";

@Component({
  selector: 'page-users',
  templateUrl: 'users.html'
})
export class UsersPage {

  users: any = [];

  constructor(
    private http: Http
  ) {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let options = new RequestOptions({ headers: headers });
    let data = { 'status': 'active'}
    this.http.post('http://path/to/laravel/api/getUsers', data, options)
    .subscribe(res => {
      var jsonData = JSON.parse(res['_body']);
      this.users = jsonData;
    })
  }
  doInfinite(infiniteScroll) {
    // How can I do infinite scroll here??? 
    setTimeout(() => {
      infiniteScroll.complete();
    }, 1000);
  }  
}

我能够获取 500 个活跃用户并将其显示在我的 View 中。

但是，由于一次查询的数据太多，因此存在一定的滞后性。

我想创建无限滚动来优化查询。但是，我不知道如何在 ionic 2 中实现它。

我希望每次滚动时至少有 10 个用户被查询。感谢您的回答。

Answer 1

我将提取我的代码之一并替换一些变量名称。希望它有意义并且有帮助:

假设你的 html 中有这个:

<ion-infinite-scroll (ionInfinite)="fetchMore($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

你的 .ts 上需要这样的东西:

fetchMore(event) {
    this.myService.getMoreItems(10/*number of items to fetch*/,this.collection.length/*you might need to send the "skip" value*/).then(
      (moreItems: any[]) => {
        if (moreItems.length > 0) {
          this.collection = this.collection.concat(moreItems);
        }
        event.complete();
      },
      (err) => {
        event.complete();
      }
    );
  }

myService.getMoreItems部分将是具有该功能的服务/提供商，返回类型是 Promise<any> ，这将发出 Http 请求。我想你已经明白了。