Angular 有没有一种方法可以在Ion内容中的元素中使用Ion Refresh,而不必下拉页面上的所有其他内容?

Angular 有没有一种方法可以在Ion内容中的元素中使用Ion Refresh,而不必下拉页面上的所有其他内容?,angular,ionic-framework,Angular,Ionic Framework,我试图在离子内容中的列表中使用离子刷新器。我只想下拉这个列表,但是按照文档中的指示使用Ion Refresh会导致整个页面向下移动,这在这种情况下没有意义。如何在Ionic V4中分离相关区域 这是我正在使用的列表 <ion-content class="scroll-inner" *ngIf="platform.is('mobile') && transactions?.length > 0" scrollY="true"> <ion-r

我试图在离子内容中的列表中使用离子刷新器。我只想下拉这个列表,但是按照文档中的指示使用Ion Refresh会导致整个页面向下移动,这在这种情况下没有意义。如何在Ionic V4中分离相关区域

这是我正在使用的列表

<ion-content class="scroll-inner" *ngIf="platform.is('mobile') && transactions?.length > 0" scrollY="true">
        <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)"></ion-refresher>
        <ion-virtual-scroll no-margin no-padding [items]="transactions">
          <ion-item class="transaction" *virtualItem="let t">
            <ion-col size="4" size-xs="3" text-center>{{formatDate(t.timestamp)}}</ion-col>
            <ion-col size="4" size-xs="5" text-left>{{t.description}}</ion-col>
            <ion-col size="4" no-padding size-xs="2" text-center>{{t.fee ? (t.fee | currency) : '---'}}</ion-col>
            <ion-col size="4" no-padding size-xs="2" text-center [ngStyle]="t.amount === 0 && {'color': 'black'} ||
            t.amount > 0 && {'color': 'green'} ||
            t.amount < 0 && {'color': 'red'}">{{t.amount | currency}}</ion-col>
          </ion-item>
        </ion-virtual-scroll>
      </ion-content>

{{formatDate(t.timestamp)}
{{t.description}}
{{t.fee?(t.fee |货币):'--'}
{t.金额|货币}

此代码块是用

包装的页面中的一个组件。我刚刚遇到了相同的问题,这会发生,并且您的页面中的所有内容都将被下拉。最好的方法是将“离子刷新”放在希望动画停止播放的离子内容中。

我刚刚遇到了同样的问题,这种情况会发生,并且您的内容中的所有内容都将被停止播放。最好的方法是将离子刷新放置在希望动画停止的离子内容中。

我的解决方案是使用两个离子内容进行嵌套:

<ion-content>
  <!-- other code -->

  <ion-content style="max-height: calc(100% - 220px);">
    <ion-refresher
      slot="fixed"
      (ionRefresh)="doRefresh($event)"
      style="position: relative;"
    >
      <ion-refresher-content></ion-refresher-content>
      <ion-list lines="none">
        <ion-item *ngFor="let item of List">
          {{item.name}}
        </ion-item>
      </ion-list>
    </ion-refresher>
  </ion-content>

</ion-content>

{{item.name}

我的解决方案是使用两种离子内容物进行嵌套:

<ion-content>
  <!-- other code -->

  <ion-content style="max-height: calc(100% - 220px);">
    <ion-refresher
      slot="fixed"
      (ionRefresh)="doRefresh($event)"
      style="position: relative;"
    >
      <ion-refresher-content></ion-refresher-content>
      <ion-list lines="none">
        <ion-item *ngFor="let item of List">
          {{item.name}}
        </ion-item>
      </ion-list>
    </ion-refresher>
  </ion-content>

</ion-content>

{{item.name}