我有一个包含一些<ion-row>
和ion-col
的div。我想做的是使<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>```