uniapp 仿微信聊天页面

### 使用 UniApp 创建微信风格聊天页面

#### 1. 页面布局设计
为了实现微信风格的聊天界面，页面结构通常分为三部分：消息显示区、输入框以及发送按钮。通过 `view` 组件来构建基本框架。

<template>
  <view class="chat-container">
    <!-- 消息区域 -->
    <scroll-view scroll-y="true" :style="{ height: scrollViewHeight + 'px' }" @scrolltolower="loadMoreMessages()">
      <block v-for="(item, index) in messageList" :key="index">
        <view :class="[item.type === 'self' ? 'message-self' : 'message-other']">{{ item.content }}</view>
      </block>
    </scroll-view>

    <!-- 输入栏 -->
    <view class="input-area">
      <input type="text" placeholder="请输入消息..." v-model="newMessage"/>
      <button @click="sendMessage()">发送</button>
    </view>
  </view>
</template>

此模板定义了一个可垂直滚动的消息列表，并且当用户滚动至最底端时触发加载更多历史记录的功能[^1]。

#### 2. 样式设置
对于样式方面，主要依赖于 CSS 来调整各个元素的位置和外观特性，确保整体视觉效果贴近原生应用体验。

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
}

.message-self,
.message-other {
  margin: 8px;
  padding: 12px;
  border-radius: 16px;
  max-width: 70%;
}

.message-self {
  align-self: flex-end;
  background-color: #dcf8c6;
}

.message-other {
  align-self: flex-start;
  background-color: #fff;
}
  
.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, .1);
  background-color: white;
}

input[type='text'] {
  flex-grow: 1;
  padding-left: 1em;
}

button {
  cursor: pointer;
  font-size: medium;
  color: blue;
}
</style>

上述代码片段设置了不同类型的气泡样式（自己发出的信息与其他人的），并固定了底部输入条位置。

#### 3. 功能逻辑处理
最后，在 JavaScript 中编写业务逻辑，比如接收新消息、更新视图状态等操作。

<script>
export default {
  data() {
    return {
      newMessage: '',
      messageList: [],
      scrollViewHeight: window.innerHeight * 0.8 // 计算可用高度
    };
  },
  methods: {
    sendMessage() {
      const msg = this.newMessage.trim();
      if (!msg.length) return;

      this.messageList.push({ content: msg, type: "self" });
      this.scrollToBottom();

      // 清空输入框
      this.newMessage = '';
      
      // 模拟对方回复
      setTimeout(() => {
        this.messageList.push({
          content: "这是来自朋友的回答。",
          type: "other"
        });
        this.scrollToBottom();
      }, 500);
    },

    loadMoreMessages() {
      console.log('正在加载更多...');
      // 这里可以加入实际的数据获取逻辑
    },

    scrollToBottom() {
      this.$nextTick(function () {
        let query = uni.createSelectorQuery().in(this);
        query.select('.chat-container').boundingClientRect(data => {
          this.scrollViewHeight = data.height;
        }).exec();
        
        // 延迟执行以等待DOM渲染完成
        setTimeout(() => {
          this.$refs.scrollView && this.$refs.scrollView.scrollTop();
        }, 100);
      });
    }
  }
};
</script>

这段脚本实现了简单的对话交互功能，包括发送消息后的自动滚屏行为[^2]。