ionic - 使用 ion-refresher 时 ion-item 不可点击

Question

我的页面有一个可点击项目的列表，调用 openNotification 函数，它工作得很好。我在页面中添加了 ion-refresher，然后点击事件停止工作...

我做错了什么？

<ion-content class="notifications-content">
  <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
    <ion-refresher-content>
      <ng-container *ngIf="notifications">
        <ion-item-group>
          <ion-item-sliding *ngFor="let notification of notifications">
            <ion-item class="notification-item" lines="none" button (click)="openNotification(notification)">
              <ion-row class="notification-item-wrapper" [class.unread]="!notification.isViewed">
                <ion-col size="9" class="details-wrapper">
                  <h2 class="details-name">{{ notification.title }}</h2>
                  <p class="details-description">
                    {{ notification.content}}</p>
                </ion-col>
                <ion-col size="3" class="date-wrapper">
                  <h3 class="notification-date">{{ notification.date| date:'HH:mm dd/MM' }}</h3>
                </ion-col>
              </ion-row>
          </ion-item-sliding>
        </ion-item-group>
      </ng-container>
     </ion-refresher-content>
  </ion-refresher>
</ion-content>

Answer 1

ion-refresher 在这里用作您的列表的包装器，您需要做的就是像这样将您的列表移到 ion-refresher 之外

<ion-content class="notifications-content">
    <ion-refresher slot="fixed" (ionRefresh)="refresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <ng-container *ngIf="notifications">
        <ion-item-group>
          <ion-item-sliding *ngFor="let notification of notifications">
            <ion-item class="notification-item" lines="none" button (click)="openNotification(notification)">
              <ion-row class="notification-item-wrapper" [class.unread]="!notification.isViewed">
                <ion-col size="9" class="details-wrapper">
                  <h2 class="details-name">{{ notification.title }}</h2>
                  <p class="details-description">
                    {{ notification.content}}</p>
                </ion-col>
                <ion-col size="3" class="date-wrapper">
                  <h3 class="notification-date">{{ notification.date| date:'HH:mm dd/MM' }}</h3>
                </ion-col>
              </ion-row>
          </ion-item-sliding>
        </ion-item-group>
      </ng-container>
  </ion-content>

参考文献：

ionic - 使用 ion-refresher 时 ion-item 不可点击

ionic - when using ion-refresher ion-item is not clickable

ionic-framework

ionic4