小程序聊天功能组件

小程序聊天功能组件
先上效果图

wxml

<view class='homeView' style='margin-top:{{margintop}}rpx;'>
  <view class='listView'>
    <block wx:for="{{messageList}}">
      <view wx:if="{{item.sender_id===receiver_id}}" class='leftView'>
        <view class='float-left'>
          <view>
            <image class='head-image' src='{{receiver_avatar}}'></image>
          </view>
          <view wx:if="{{item.type == 0}}" class='left-content'>{{item.content}}</view>
          <view wx:else>
            <image class='content-img' src='{{item.content}}' data-image='{{item.content}}' bindtap='previewImage'>></image>
          </view>
        </view>
        <view class='time'>
          <text>{{item.send_time}}</text>
        </view>
      </view>
      <view wx:else class='rightView'>
        <view class='float-right'>
          <view wx:if="{{item.read_status>=0}}" class='{{item.read_status === 0?"notRead":"hasRead"}}'>{{item.read_status===0?"":""}}</view>
          <view wx:elif="{{item.status}}" class='{{item.status === 0?"sendFail":"sending"}}'>{{item.status===0?"发送失败":"发送中.."}}</view>
          <view wx:if="{{item.type == 0}}" class='right-content'>{{item.content}}</view>
          <view wx:else>
            <image class='content-img' src='{{item.content}}' data-image='{{item.content}}' bindtap='previewImage'></image>
          </view>
          <view>
            <image class='head-image' src='{{user_avatar}}'></image>
          </view>
        </view>
        <view class='time'>
          <text>{{item.send_time}}</text>
        </view>
      </view>
    </block>
  </view>
  <!-- 每次有新消息滚动到新消息 -->
  <view class='hei' id="hei"></view>
  <view class='sendView'>
    <input bindinput='sendTextBind' placeholder="输入聊天内容" value='{{sendText}}' maxlength='100' style='width: {{sendText?"75%":"80%"}}' />
    <form bindsubmit="formSubmit" report-submit='true'>
      <button type="primary" form-type='submit' wx:if="{{sendText}}">发送</button>
      <image src='../../images/other/add.png' bindtap='toChoiceImage' wx:else></image>
    </form>
  </view>
</view>

wxss

/* 聊天内容 */

.homeView {
  border-top: 1px solid #ededed;
}

.listView {
  padding-bottom: 50px;
}

.listView>view {
  padding: 10px;
}

.rightView {
  text-align: right;
}

.float-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.left-content {
  background-color: white;
  padding: 15rpx;
  border-radius: 6px;
  margin: 0 100rpx 0 30rpx;
  font-size: 35rpx;
  text-align: justify;
  word-break: break-all;
  position: relative;
}

.left-content::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border: 30rpx solid;
  border-color: transparent #fff transparent transparent;
  top: 0;
  left: -45rpx;
}

.float-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.right-content {
  padding: 15rpx;
  border-radius: 6px;
  background-color: #9ee657;
  text-align: left;
  margin: 0 30rpx 0 20rpx;
  font-size: 35rpx;
  position: relative;
}

.right-content::after {
  position: absolute;
  content: "";
  right: -45rpx;
  width: 0;
  height: 0;
  border: 30rpx solid;
  border-color: transparent transparent transparent #9ee657;
  top: 0;
}

.head-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

/* 聊天输入框 */

.sendView {
  position: fixed;
  bottom: 0;
  height: 110rpx;
  width: 100%;
  background-color: #f7f7f7;
}

.sendView input {
  margin: 15rpx 0 0 10rpx;
  padding-left: 20rpx;
  border-radius: 10rpx;
  height: 80rpx;
  float: left;
  background-color: #fff;
  font-size: 30rpx;
}

.sendView button {
  margin: 20rpx 10rpx 0 0;
  float: right;
  width: 15%;
  font-size: 28rpx;
}

.sendView image {
  margin: 28rpx 30rpx 0 0;
  float: right;
  width: 64rpx;
  height: 64rpx;
}

/* 时间标记 */

.time {
  text-align: center;
  margin-top: 10rpx;
}

.time text {
  color: #bfbfbf;
  padding: 8rpx 15rpx;
  font-size: 25rpx;
}

/* 聊天图片 */

.content-img {
  width: 300rpx;
  height: 200rpx;
  margin: 0 20rpx 0 10rpx;
}

/* 滚动到新消息 */

.hei {
  margin-top: 50px;
  height: 20rpx;
}

js代码就不放出来了，毕竟每个人的业务逻辑代码都不同。发现代码有错的地方，欢迎留言指出噢，谢谢。