小程序聊天会话组件

 

场景

用于在线客服的聊天对话等

 

一、布局圈点

1、三角箭头

绘制一个26rpx*26rpx矩形，使它旋转45度，然后隐去对半，形成气泡上的直角三角形。

<!-- 画三角箭头 -->
 <view class="triangle" style="{
  
  {item.myself == 1 ? 'right: 140rpx; background: #7ECB4B' : 'left: 140rpx;'}}"></view>
 
/* 三角箭头 */
.body .triangle {
 background: white;
 width: 20rpx;
 height: 20rpx;
 margin-top: 26rpx;
 transform: rotate(45deg);
 position: absolute;
}

 

2、flex-flow改变流动方向

分别取值['row' | 'row-reverse']，实现对方发来的消息头像居左，自己发的消息头像居右。

<view class="body" style="flex-flow: {
  
  {item.myself == 0 ? 'row' : 'row-reverse'}}">

 

3、按住说话悬浮层水平与垂直居中

方案1，js手工计算

data: {
 hud_top: (wx.getSystemInfoSync().windowHeight - 150) / 2,
 hud_left: (wx.getSystemInfoSync().windowWidth - 150) / 2,
}
<view class="