trafficBroadcast/miniprogram/components/chatroom/chatroom.wxml

<view class="chatroom">
  <view class="header">
    <!-- display number of people in the room -->
    <view class="left"></view>
    <!-- room name -->
    <view class="middle">{{groupName}}</view>
    <!-- reserved -->
    <view class="right"></view>
  </view>

  <!-- chats -->
  <scroll-view 
    class="body" 
    scroll-y 
    scroll-with-animation="{{scrollWithAnimation}}"
    scroll-top="{{scrollTop}}" 
    scroll-into-view="{{scrollToMessage}}"
    bindscrolltoupper="onScrollToUpper"
  >
    <view 
      wx:for="{{chats}}"
      wx:key="{{item._id}}"
      id="item-{{index}}"
      class="message {{openId == item._openid ? 'message__self' : ''}}"
    >
      <image 
        class="avatar"
        src="{{item.avatar}}"
        mode="scaleToFill"
      ></image> 
      <view class="main">
        <view class="nickname">{{item.nickName}}</view>
        <block wx:if="{{item.msgType === 'image'}}">
          <view class="image-wrapper">
            <view class="loading" wx:if="{{item.writeStatus > -1}}">{{item.writeStatus}}%</view>
            <image 
              src="{{item.tempFilePath || item.imgFileID}}" 
              data-fileid="{{item.tempFilePath || item.imgFileID}}" 
              class="image-content" 
              style="{{item.imgStyle}}"
              mode="scallToFill" 
              bindtap="onMessageImageTap"></image>
          </view>
        </block>
        <block wx:else>
          <view class="text-wrapper">
            <view class="loading" wx:if="{{item.writeStatus === 'pending'}}">···</view>
            <view class="text-content">{{item.textContent}}</view>
          </view>
        </block>
      </view>
    </view>
  </scroll-view>

  <!-- message sender -->
  <view class="footer">
    <view class="message-sender" wx:if="{{userInfo}}">
      <input 
        class="text-input"
        type="text"
        confirm-type="send"
        bindconfirm="onConfirmSendText"
        cursor-spacing="20"
        value="{{textInputValue}}"
      ></input>

      <image 
        src="./photo.png" 
        class="btn-send-image" 
        mode="scaleToFill"
        bindtap="onChooseImage"
      ></image>
    </view>

    <view class="message-sender" wx:if="{{!userInfo}}">
      <button 
        open-type="getUserInfo" 
        bindgetuserinfo="onGetUserInfo"
        class="userinfo"
      >请先登录后参与聊天</button>
    </view>
  </view>

</view>