ionic-framework - ionic 3 在列上展开行单击

Question

工作 ionic 3 应用程序需要在列上的任何点击上展开行。

这是我的目标:

1) 屏幕有两列

2) 每列的可扩展行上的屏幕。

我按照 https://www.joshmorony.com/creating-an-accordion-list-in-ionic/ 做了什么但它会在列内扩展列。我需要在列上选择行。

Answer 1

我找到了最好的方法来做到这一点，并且它对我有用。

<ion-grid class="card-background-page" no-padding>
    <ion-row *ngFor="let i of rows" no-padding>
        <ion-col *ngFor="let category of categories | slice:(i*2):(i+1)*2" col-6 col-md-4 col-xl-3 (click)="expandItem(category, i)">
            <ion-card>
                <img src="{{category?.url}}" />
                <div [ngClass]="(listItemExpandedData?.id === category?.id) ? '' : 'textMiddle'">
                    <div class="card-title" [hidden]="listItemExpandedData?.id === category?.id">{{category?.title | slice:0:20}}</div>
                </div>
            </ion-card>
        </ion-col>
        <ion-col col-12 *ngIf="listItemExpanded === i" class="ItemExpandedData" [class.collapsed]="!listItemExpanded"> {{listItemExpandedData?.title}}</ion-col>
    </ion-row> </ion-grid>

在您的 .ts 文件中

categories = [];
rows: any;
listItemExpanded = false;
listItemExpandedData: any;

API响应

this.categories = data.posts;
this.rows = Array.from(Array(Math.ceil(this.categories.length / 2)).keys());

切换功能

expandItem(item, i){
    if(!this.listItemExpandedData) {
        this.listItemExpanded = i;
        this.listItemExpandedData = item;
    } else {
      if(item.id === this.listItemExpandedData.id  ){
        this.listItemExpanded = false;
        this.listItemExpandedData = [];
      } else {
        this.listItemExpanded = i;
        this.listItemExpandedData = item;
      }
    }
}

CSS

[ion-card {
            position: relative;
            text-align: center;
            img {
                height: 140px !important;
            }
        }

        .card-title {
            position: absolute;
            top: 25%;
            font-size: 1.4em;
            width: 100%;
            font-weight: bold;
            color: #fff;
            padding: 0px 50px;
        }

        .card-subtitle {
            font-size: 1.0em;
            position: absolute;
            top: 52%;
            width: 100%;
            color: #fff;
        }
        .textMiddle {
            background: #1c4d78d9;
            height: 150px;
            top: 0px;
            position: absolute;
            left: auto;
            width: -webkit-fill-available;
        }

        .ItemExpandedData{
            padding: 16px !important;
            transition: 0.2s linear;
        }
        ion-card.card{
            margin: 0;
            border-radius: 0px;
            box-shadow: none
        }][1]

See Result