ionic 3中的聊天UI
ionic 3中的聊天UI
提问于 2018-06-30 18:06:02
我已经尝试创建一个聊天用户界面。我在放置聊天气泡时遇到了麻烦。它是as
这是我的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;
}
有没有人可以帮我显示聊天气泡后，另一个，但不是在同一行如上图所示。
回答 3
Stack Overflow用户
发布于 2018-07-03 04:28:36
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
Stack Overflow用户
发布于 2018-07-03 04:52:35
使用flexbox、flex-direction: column，并为每个人提供不同的align-self值。
在Angular中，我认为元素的语法应该是：
<div [ngClass]="userId === msg.id ? 'me' : 'you'">{{msg.reply}}</div>下面是一个包含静态元素的示例：
.chat {
font-family: sans-serif;
display: flex;
flex-direction: column;
}
.message {
border-radius: 5px;
margin: 0.2em 0;
padding: 0.5em;
max-width: 50%;
}
.me {
align-self: flex-start;
background-color: blue;
color: white;
}
.you {
align-self: flex-end;
background-color: green;
color: white;
}<div class="chat">
<div class="message me">Hello</div>
<div class="message you">Hello</div>
<div class="message me">How are you?</div>
<div class="message you">I'm fine</div>
<div class="message you">How about you?</div>
<div class="message me">I'm doing so amazingly you wouldn't believe all the things that are happening right now it would take up at least 50% of the width of the page to discuss all the things that I want to tell you.</div>
</div>
Stack Overflow用户
发布于 2018-07-03 05:39:28
以下是我一直在开发的聊天应用程序的代码。你也许能从中得到一些有用的东西。
<ion-list>
<div text-right *ngFor="let message of messages; let i = index; let first = first;">
<div *ngIf = "message.from == this.user">
<span *ngIf = "i==0" >
<ion-label stacked> {{message?.from}} </ion-label>
<p text-right> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from == messages[i-1].from" >
<p text-right> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from != messages[i-1].from" >
<ion-label stacked> {{message?.from}} </ion-label>
<p text-right> {{message?.msg}}</p>
</span>
</div>
<div *ngIf = "message.from != this.user">
<span *ngIf = "i==0" >
<ion-label stacked text-left> {{message?.from}} </ion-label>
<p text-left> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from == messages[i-1].from" >
<p text-left> {{message?.msg}}</p>
</span>
<span *ngIf = "i>0 && message.from != messages[i-1].from" >
<ion-label stacked text-left> {{message?.from}} </ion-label>
<p text-left> {{message?.msg}}</p>
</span>
</div>
</div>
</ion-list>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51113883
复制相关文章
相似问题
腾讯云开发者
