小程序聊天框

图片例行如下

wxml:

<view class="chat-container">
  <!-- 接收消息的人物框 -->
  <view class="message received">
    <text class="content">Hello! This is a received message.</text>
  </view>

  <!-- 发送消息的人物框 -->
  <view class="message sent">
    <text class="content">Hi! This is a sent message.</text>
  </view>
</view>

wxss:

/* pages/home/notice/notice.wxss */
/* chat.wxss */
.chat-container {
  display: flex;
  flex-direction: column;
}

.message {
  margin: 5px;
  padding: 10px;
  border-radius: 8px;
  max-width: 70%; /* Adjust as needed */
}

.received {
  background-color: #e0e0e0; /* Light gray for received messages */
}

.sent {
  background-color: #4caf50; /* Green for sent messages */
  align-self: flex-end;
}

.content {
  color: #333;
}