Question

我需要知道我正在从api获取数据。我需要显示前10个数组。然后当用户滚动然后显示10这样。我怎样才能做到这一点？

this.item = this.http.get('https://afaq-manda.com/api/');


this.item.subscribe(data => {
    loading.dismiss();

 this.data = data;
  console.log('my data: ', this.data);
})

这是我获取数据的方式。谢谢

Answer 1

您可以为此使用无限滚动。 HTML：

  <ion-list>
   <ion-item *ngFor="let i of itemsToDisplay">{{i}}</ion-item>
 </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>

组件：

   itemsToDisplay =[];
    ngOnInit()
    {
     this.item = this.http.get('https://afaq-manda.com/api/');
     this.item.subscribe(data => {
      this.data = data;
      for(let i=0; i< 10; i++)
      {
       this.itemsToDisplay.push(this.data[i]);
      }
     })
    }

    doinfinite(){
     let len = this.itemsToDisplay.length;
     for(let i=len ; i< len+10; i++)
     {
       this.itemsToDisplay.push(this.data[i]);
     }
   }

请参考以下内容： https://ionicframework.com/docs/v3/api/components/infinite-scroll/InfiniteScroll/

Answer 2

您可以通过两种方式完成

无限滚动内容 infinite-scroll-content

ion-infinite-scroll组件具有无限滚动逻辑。它需要一个子组件才能显示内容。 Ionic默认使用其ion-infinite-scroll-content组件。该组件显示无限滚动并根据无限滚动的状态更改外观。它显示一个微调器，该微调器基于用户所在的平台看起来最佳。但是，可以通过在ion-infinite-scroll-content组件上设置属性来更改默认微调器，并可以添加文本。

在离子视图中

<ion-content>
  <ion-button (click)="toggleInfiniteScroll()" expand="block">
    Toggle Infinite Scroll
  </ion-button>

  <ion-list></ion-list>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

在.ts
中

 import { Component, ViewChild } from '@angular/core';
    import { IonInfiniteScroll } from '@ionic/angular';

    @Component({
      selector: 'infinite-scroll-example',
      templateUrl: 'infinite-scroll-example.html',
      styleUrls: ['./infinite-scroll-example.css']
    })
    export class InfiniteScrollExample {
      @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

      constructor() {}

      loadData(event) {
        setTimeout(() => {
          console.log('Done');
          event.target.complete();

          // App logic to determine if all data is loaded
          // and disable the infinite scroll
          if (data.length == 1000) {
            event.target.disabled = true;
          }
        }, 500);
      }

      toggleInfiniteScroll() {
        this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
      }

}

第二种方式

ngx分页

简单示例

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

my.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}

ngx-pagination

离子3显示第一个10数组，然后滚动10

2 个答案: