Question

我正在研究离子应用。我正在尝试在自定义组件中使用无限滚动项，该组件包含具有根据用户选择显示的两个列表的分段。

这是组件的代码：

 <ion-content *ngIf="show">

  <div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
    <ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
        MOST TRUSTED
      </ion-segment-button>
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
        LATEST
      </ion-segment-button>
    </ion-segment>
  </div>

  <div no-margin no-padding [ngSwitch]="chx">
    <ion-list  no-margin no-padding *ngSwitchCase="'most'">

      <post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite2($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

    </ion-list>


    <ion-list no-margin no-padding  *ngSwitchCase="'recent'">

      <page-post-card no-margin  *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
      </page-post-card>

      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>

      </ion-infinite-scroll>
    </ion-list>

  </div>
</ion-content>

该组件用于离子页面，如下所示：

    <ion-content no-padding>

  <topicsearch [show]="showresult"></topicsearch>   <!-- This is the custom component -->

  <div *ngIf="!showresult" >
  <ion-list  *ngFor="let top of topics">
    <ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
  </ion-list>
  </div>

</ion-content>

问题是在自定义组件中向下滚动时无限滚动不会触发。有人有解决方案吗？

Answer 1

您的组件使用ion-content，其中包含另一个ion-content。从组件中删除ion-content 并且doInfinite函数也将在组件ts中声明。

无限滚动不会在自定义组件内触发 - 离子2

1 个答案: