html - Ionic 3 中的滑动卡片

Question

我有一个带有一些<ion-row>和的 div ion-col。我想做的事情是让<ion-card>项目像一个<ion-item-sliding>列表https://ionicframework.com/docs/v3/components/#sliding-list

我不知道是否可以不改变我现在拥有的所有结构。

        <ion-row>
          <h2>{{day.date}}</h2>
        </ion-row>

        <div *ngFor="let item of day.dayArray; let i=index">
          <ion-row>
            <ion-col col-10 class="no-padding">
              <ion-card (click)="openDetails(j, i)">
                <ion-row>
                  <ion-col col-3>
                    <span class="departure-time">{{ item.hour }}</span>
                    <span class="departure-time-desc">{{ item.date | date: "a" }}</span>
                  </ion-col>

                  <ion-col col-3>
                    <ion-avatar item-start>
                      <img *ngIf="segment != 'driver'" [src]="item.driver.profile_image">
                      <img *ngIf="segment === 'driver'" [src]="imageUrl">
                    </ion-avatar>
                  </ion-col>

                  <ion-col col-6>
                    <span *ngIf="segment === 'driver'" class="destination">{{item.destination.direction}}</span>
                    <span *ngIf="segment === 'driver' && item.passengers.length === 1" class="driver-age">{{item.passengers.length}} pasajero</span>
                    <span *ngIf="segment === 'driver' && item.passengers.length != 1" class="driver-age">{{item.passengers.length}} pasajeros</span>

                    <span *ngIf="segment != 'driver'" class="driver-name">{{item.driver.first_name}} {{item.driver.last_name}}</span>
                    <span *ngIf="segment != 'driver'" class="driver-age">{{item.destination.direction}}</span>
                  </ion-col>
                </ion-row>
              </ion-card>
            </ion-col>

            <ion-col col-2 class="chat-col" (click)="openChat(j, i)">
              <ion-icon name="chatbubbles" color="danger" [ngClass]="{'notification': item.notificationInJourney}"></ion-icon>
            </ion-col>
          </ion-row>
        </div>
      </div>```

标签： htmlangularionic-frameworkionic3