uni-app聊天记录模式

在uni-app中实现聊天记录模式，可以利用其强大的跨平台能力和丰富的组件库来构建类似微信聊天界面的功能。以下是一个简化的代码案例，展示如何实现一个基本的聊天记录视图，包括消息列表和发送消息的功能。

1. 创建页面结构

在pages目录下创建一个新的页面，比如chat.vue，用于显示聊天记录。

<template>
  <view class="chat-container">
    <scroll-view scroll-y="true" class="message-list">
      <block v-for="(msg, index) in messages" :key="index">
        <view class="message" :class="{'self': msg.from === 'self', 'other': msg.from !== 'self'}">
          <text>{{ msg.content }}</text>
        </view>
      </block>
    </scroll-view>
    <view class="input-container">
      <input v-model="inputContent" placeholder="输入消息" />
      <button @click="sendMessage">发送</button>
    </view>
  </view>
</template>

2. 编写页面逻辑

在chat.vue的<script>部分添加数据绑定和事件处理逻辑。

<script>
export default {
  data() {
    return {
      messages: [
        { from: 'other', content: 'Hello!' },
        { from: 'self', content: 'Hi there!' }
      ],
      inputContent: ''
    };
  },
  methods: {
    sendMessage() {
      if (this.inputContent.trim()) {
        this.messages.push({ from: 'self', content: this.inputContent });
        this.inputContent = '';
        // 可以在这里添加发送消息到服务器的逻辑
      }
    }
  }
};
</script>

3. 添加样式

在chat.vue的<style>部分添加一些基本样式。

<style scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.message-list {
  flex: 1;
  padding: 10px;
  background-color: #f0f0f0;
}
.message {
  margin: 10px 0;
  padding: 10px;
  max-width: 60%;
  border-radius: 5px;
}
.self {
  align-self: flex-end;
  background-color: #007aff;
  color: white;
}
.other {
  align-self: flex-start;
  background-color: #e0e0e0;
  color: black;
}
.input-container {
  display: flex;
  padding: 10px;
  background-color: white;
}
input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
button {
  margin-left: 10px;
  padding: 10px 20px;
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

这个简化的示例展示了如何在uni-app中实现一个基本的聊天记录模式，包括消息列表的渲染和发送消息的功能。实际应用中，你可能还需要添加更多的功能，比如消息加载、消息时间戳显示、消息状态（已发送、已读/未读）等。