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" scroll-into-view="{{scrollToView}}" scroll-with-animation="true">
    <view class="chat-messages">
      <block wx:if="{{loading && messages.length === 0}}">
        <view class="loading">加载中...</view>
      </block>
      <block wx:elif="{{messages.length === 0}}">
        <view class="empty-messages">暂无聊天记录</view>
      </block>
      <block wx:else>
        <!-- 动态渲染聊天消息 -->
        <view wx:for="{{messages}}" wx:key="id" class="message-item {{item.sender}}" id="{{index === messages.length - 1 ? 'latest-message' : 'message-' + item.id}}">
          <!-- 对方消息 -->
          <view wx:if="{{item.sender === 'other'}}" class="avatar">
            <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
          </view>
          <view class="message-bubble">
            <text class="message-content">{{item.content}}</text>
            <text class="message-time">{{item.time}}</text>
          </view>
          <!-- 自己的消息 -->
          <view wx:if="{{item.sender === 'me'}}" class="avatar">
            <image src="https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0" mode="aspectFill"></image>
          </view>
        </view>
      </block>
    </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>