时间戳

首页 > 解决方案 > 在 10 个项目后加载 msg 的无限滚动

ionic-framework - 在 10 个项目后加载 msg 的无限滚动

问题描述

我正在显示项目列表。我想要，当我们滚动时，在显示 10 个项目之后。它显示“正在加载更多...”

(ionInfinite)="doInfinite($event)"

没有触发。

.html 文件

<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let i of items">{{i}}</ion-item>
  </ion-list>

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

</ion-content>

.ts 文件

import { IonInfiniteScroll, IonVirtualScroll } from '@ionic/angular';

export class FoodMenuPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  items = [];

  constructor() { 
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
      }
  }


  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
    for (let i = 0; i < 30; i++) {
    this.items.push( this.items.length );
    }

    console.log('Async operation has ended');
    infiniteScroll.complete();
    }, 500);
    }

标签： ionic-frameworkionic4

解决方案

HTML

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


<div *ngIf="pagingEnabled" class="nomore_data"> No more data is available.</div>

TS

if (this.image1 != 0) {
        for (let i in this.image1) {
          this.images = this.images.concat(this.image1[i]);
        }
      } else {
        this.pagingEnabled = true;
      } \\image1 and image have same json value

if (Infinitescroll) { \\every scroll infinite has been fire
        Infinitescroll.target.complete();\\every scroll tarhas been completed
      }

不需要viewchild或任何东西

推荐阅读