Angular 有没有一种方法可以在Ion内容中的元素中使用Ion Refresh,而不必下拉页面上的所有其他内容?
我试图在离子内容中的列表中使用离子刷新器。我只想下拉这个列表,但是按照文档中的指示使用Ion Refresh会导致整个页面向下移动,这在这种情况下没有意义。如何在Ionic V4中分离相关区域 这是我正在使用的列表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-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}