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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接: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>

三、具体效果

                                                                     

小结

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

                                                                           感谢您的访问!

展开阅读全文

两列显示

09-25

Bizsupply.ascx代码如下:rnrn[code=VB.NET]rn<%@ Import Namespace="Project.Business.DBOperator.BusinessInfo"%>rn<%@ Control Language="c#" AutoEventWireup="false" Codebehind="BizSupply.ascx.cs" Inherits="Project.UserControl.BizSupply" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>rn<%@ Import namespace="System.Data" %>rn<%@ OutputCache Duration="60" VaryByParam="none" %>rn<%@ import namespace="Project.ToolHelper" %>rnrn rn rn rn <%rn DataTable dt=GetInfoData(); //获取数据rn int RowCount = dt.Rows.Count;rn rn if(dt==null || RowCount == 0) //当没有数据时,显示一个相同大小的空表 rn %>rn rn rn <%for (int intLoop = 1;intLoop <= Convert.ToInt32(RowCount);intLoop ++ )%>rn rn rn rn <%%>rn rn rn rn <%else //数据显示时%> rn rn rn rn rn rn rn rn <% rn int showRow = RowCount/ColCount;rn int showOtherColumns = RowCount%ColCount;rn rn DataRow dr;rn for(int i=0;i rn <% for(int j=0;j align=middle border=0>rn <%else%>rn ·rn <% //判断标题前是否有小图片,当没有的时候。结束 %>rn rn <%=FormatTitle(sConvertStr,dr[BusinessInfoData.BUSINESSINFO_DIRECTIONID])%>rn rn rn <%if(dr[BusinessInfoData.BUSINESSINFO_PUBTIME].ToString()!=null)rn rn Response.Write (FormatDateTime(sConvertDate,DateStyle));rn rn rn %>rn <% %>rn rn <% rn if(showOtherColumns > 0) // 多列时,是否出现不够填充一行时,显示最后一行 %>rn rn rn <%for(int i=RowCount - showOtherColumns ;i align=middle border=0>rn <%else%>rn ·rn <% //判断标题前是否有小图片,当没有的时候。结束 %>rn rn <%=FormatTitle(sConvertStr,dr[BusinessInfoData.BUSINESSINFO_DIRECTIONID])%>rn rn rn <%if(dr[BusinessInfoData.BUSINESSINFO_PUBTIME].ToString()!=null)rn rn Response.Write (FormatDateTime(sConvertDate,DateStyle));rn %>rn rn <% rn rn // 插入空白单元格rn for(int i=showOtherColumns ;i rn <% %>rn rn rn <% %> rn rn <% %>rn rnrn[/code]rnrnrn[color=#FF0000]这是显示一列.我现在想显示两列怎么改?后台程序是封装过的.改不了.[/color]我新手,高手指教 论坛

没有更多推荐了,返回首页