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

【问题标题】：ionic - when using ion-refresher ion-item is not clickableionic - 使用 ion-refresher 时，ion-item 不可点击
【发布时间】：2020-11-18 22:50:07
【问题描述】：

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

我做错了什么？

<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>

【问题讨论】：

标签： ionic-framework ionic4

【解决方案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>

参考资料：

【讨论】：