我尝试创建一个聊天 UI。我在放置聊天气泡时遇到了问题。它就像
这是我的 HTML 代码
<ion-list no-lines class="msgbubble" *ngFor="let msg of messages">
<div class="innermsg left" *ngIf="userId != msg.id">
{{ msg.reply }}
</div>
<div class="innermsg right" *ngIf="userId == msg.id">
{{ msg.reply }}
</div>
</ion-list>
这是我的scss代码
.innermsg {
display: inline-block;
padding: 5px 10px;
margin: 5px;
font-weight: 500;
font-size: 16px;
border-radius: 15px;
margin-bottom: 5px;
}
.innermsg.left {
float: left;
background-color: #F1F0F0;
color: black;
}
.innermsg.right {
float: right;
//margin-right: 10%;
background-color: #0084FF;
color: white;
}
.msgbubble {
margin-bottom: 10px;
}
谁能帮我一个接一个地显示聊天气泡,但不要像上图那样在同一行。
最佳答案
HTML 结构需要稍微改变一下,每个聊天气泡需要占一行,只有行内的内容必须具有您的格式。
像这样:
<ion-list no-lines class="msgbubble" >
<ion-item *ngFor="let msg of messages">
<span [ngClass]="userId == msg.id ? 'innermsg right':'innermsg left'">{{ msg.reply }}</span>
</ion-item>
</ion-list>
检查执行 here
关于html - ionic 3 中的聊天 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51113883/