Mini-Program/pages/chat-detail/index.wxml

<view class="container">
  <view class="chat-header">
    <view class="header-back" bindtap="onBack">
      <text>←</text>
    </view>
    <view class="header-info">
      <text class="header-name">{{chatTitle}}</text>
    </view>
    <view class="header-more">
      <text>⋮</text>
    </view>
  </view>
  
  <scroll-view class="chat-content" scroll-y bindscrolltolower="loadMoreMessages">
    <view class="chat-messages">
      <!-- 对方消息 -->
      <view class="message-item other">
        <view class="avatar">
          <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
        </view>
        <view class="message-bubble">
          <text class="message-content">您好，有什么可以帮助您的吗？</text>
          <text class="message-time">刚刚</text>
        </view>
      </view>
      
      <!-- 自己的消息 -->
      <view class="message-item me">
        <view class="message-bubble">
          <text class="message-content">你好，我想咨询一下产品信息</text>
          <text class="message-time">刚刚</text>
        </view>
        <view class="avatar">
          <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </scroll-view>
  
  <view class="chat-input-area">
    <input class="message-input" placeholder="请输入消息" bindinput="onInputChange" value="{{inputValue}}"></input>
    <button class="send-button" bindtap="sendMessage">发送</button>
  </view>
</view>