【前端】ionic4 班课作答记录分两列，使用div实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m18633778874/article/details/88891617

前言

     小编最近做项目时，遇到一个将数据分成两列显示，由于之前使用<ion-col>标签比较顺手，思维定式的便想到了这个做法，没有想到中间的实现过程很是曲折，具体看一下我的跌宕的历程吧。

跑偏的思路--数据分成两个集合

 一、ion-col实现两列

二、后端数据需要分成两个集合

三、出现问题--数据处理麻烦

大神指点--使用div形成两列

一、div样式

 只需要两个CSS属性：float、width

<div style="float:left;width:50%;" *ngFor="let list of lists; let j = index">

</div>

二、详细代码

 使用<ion-card>、<ion-row>、<ion-col>等标签，实现分列效果：

 <!-- 显示数据 -->
    <div style="float:left;width:50%;" *ngFor="let list of lists; let j = index">
        <ion-card class="welcome-card" [ngStyle]="{'background-color':list.remark}"
            (click)="goToIssue(list.brainStormingId,j)">
            <!-- card框的颜色 -->
            <ion-row>
                <span style="font-size: 13px;margin: 7%;">{{list.userName}}</span>
            </ion-row>
            <ion-row style="margin-top: 4%;margin-left: 4%;font-size: 18px;">
                <div style="font-size:18px;">
                    {{list.content}}
                </div>
            </ion-row>
            <hr style=" height:2px;border:none;border-top:2px dotted #ffffff;" />

            <ion-row>
                <ion-col>
                    <span style="font-size: 7px;"
                        *ngIf="list.updateTime==undefined">{{list.createTime}}</span>
                    <span style="font-size: 7px;"
                        *ngIf="list.updateTime!==undefined">{{list.updateTime}}
                    </span>
                </ion-col>
                <ion-col>
                    <span style="font-size: 15px;float: right;">{{list.likedNumber}}</span>
                    <ion-icon [ngStyle]="{'color':!isThumbUpArray[j]  ? 'gray' : '#FA8072' }"
                        style="font-size: 150%;padding-bottom: 25%;color: gray;padding-right: 4%;float: right;"
                        name="thumbs-up" (click)="thumbUp(list,j)"></ion-icon>
                </ion-col>
            </ion-row>
        </ion-card>
    </div>

三、具体效果

                                                                     

小结

    解决问题的思路非常的重要，否则我们会走弯路，留下很多辛酸泪，在这次的项目实战中，明确了前端样式的灵活运用，也会对我们的后端接口操作产生很大的影响的。

                                                                           感谢您的访问！