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

<view class="chat-page-container">
  <view class="chat-header">
    <view class="header-info">
      <text class="header-name">{{chatTitle}}</text>
    </view>
  </view>
  
  <scroll-view
    id="chatScrollView"
    scroll-y
    scroll-top="{{scrollTop}}"
    scroll-with-animation="{{scrollWithAnimation}}"
    class="chat-content"
    bindscroll="onScroll"
  >
    <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}} {{item.isNew ? 'new' : ''}}">
          <!-- 对方消息 -->
          <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 wx:if="{{hasNewMessages}}" class="new-message-tip" bindtap="scrollToBottom">
    <text>有{{newMessageCount}}条新消息，点击查看</text>
  </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>