代码之家 › 专栏 › 技术社区 › hous

使用离子3制作InfiniteScroll

symfony-3.2 ionic3 typescript

0

hous · 技术社区 · 9 年前

我使用symfony3和FosRestBundle作为后端,使用Ionic 3作为前端。

这是后端操作:

/**
 * @Rest\Get(
 *     path="/articles",
 *     name="api_article_list"
 * )
 * @Rest\QueryParam(
 *     name="limit",
 *     requirements="\d+",
 *     default="5",
 *     description="Maximum element per page"
 * )
 * @Rest\QueryParam(
 *     name="offset",
 *     requirements="\d+",
 *     default="0",
 * )
 * @Rest\View(StatusCode=201, serializerGroups={"list"})
 *
 */
public function listAction(Request $request, ParamFetcherInterface $paramFetcher)
{

    $em = $this->getDoctrine()->getManager();

    $articles = $em->getRepository('AppBundle:Article')->findBy(
        array(),
        array('id' => 'desc'),
        $paramFetcher->get('limit'), $paramFetcher->get('offset')
    );

    return $articles;
}

export class NewsPage {

results = [];
moreData = [];

constructor(public navCtrl: NavController, private http: Http, public loadingCtrl: LoadingController) {
    this.getData();
}

getData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit +'&offset=' + this.offset )
        .map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

loadMoreData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit +'&offset=' + this.offset )
        .map(res => res.json()).subscribe(data => {
        this.moreData = data;
    });
}

doInfinite(infiniteScroll) {
    this.offset += 2;

    this.loadMoreData();

    setTimeout(() => {

        infiniteScroll.complete();
    }, 500);
}

如您所见,getData()和loadMoreData()这两个函数类似,但第一个用于变量结果,第二个用于变量moreData。这只是我的想法,我怀疑这是否是一个正确的方法。

这是html代码:

<ion-card *ngFor="let result of results; let i = index">
   <ion-item> {{result.id }}</ion-item>
//............
</ion-card>

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">

  <ion-infinite-scroll-content loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

1 回复 | 直到 9 年前

1

hous 9 年前

results = [];
limit: number = 5;
offset: number = 0;

//****

getData() {
    this.http.get(Globals.baseUrl + 'articles')
        .map(res => res.json()).subscribe(data => {
        this.results = data;
    });
}

loadMoreData() {
    this.http.get(Globals.baseUrl + 'articles?limit=' + this.limit + '&offset=' + this.offset)
        .map(res => res.json()).subscribe(data => {
        for (let item of data) {
            this.results.push(item);
        }
    });

}

doInfinite(infiniteScroll) {
    this.offset += 5;
    setTimeout(() => {
        this.loadMoreData();
        infiniteScroll.complete();
    }, 500);
}