uniapp 实现聊天消息会话的列表功能怎么实现？

在 UniApp 中实现聊天消息会话列表可以通过使用 Vue 的组件和数据绑定来完成。下面是一个简单的示例，介绍了如何构建一个聊天消息会话列表。

1. 项目结构

假设你的项目结构如下：

/src
  ├─ /components
  │   └─ ChatList.vue
  ├─ /pages
  │   └─ ChatPage.vue
  └─ App.vue

2. 数据模型

我们需要一个数据模型来表示聊天会话。每个聊天会话可以包含以下字段：

• id: 唯一标识
• name: 聊天对象的名字
• lastMessage: 最新消息内容
• timestamp: 最新消息的时间戳
• avatar: 聊天对象的头像

3. 实现 ChatList 组件

创建一个 ChatList.vue 文件，代码如下：

<template>
  <view class="chat-list">
    <view v-for="chat in chatList" :key="chat.id" class="chat-item" @click="goToChat(chat.id)">
      <image :src="chat.avatar" class="avatar" />
      <view class="chat-content">
        <view class="chat-name">{{ chat.name }}</view>
        <view class="chat-message">{{ chat.lastMessage }}</view>
      </view>
      <view class="chat-time">{{ formatTimestamp(chat.timestamp) }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    chatList: {
      type: Array,
      required: true,
    },
  },
  methods: {
    goToChat(chatId) {
      // 跳转到聊天页面，可以使用 uni.navigateTo 等方法
      uni.navigateTo({
        url: `/pages/ChatPage.vue?id=${chatId}`,
      });
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      return date.getHours() + ':' + String(date.getMinutes()).padStart(2, '0'); // 格式化时间
    },
  },
};
</script>

<style scoped>
.chat-list {
  padding: 10px;
}

.chat-item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #e0e0e0;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 10px;
}

.chat-content {
  flex: 1;
}

.chat-name {
  font-weight: bold;
}

.chat-message {
  color: #999;
}

.chat-time {
  color: #999;
  margin-left: 10px;
}
</style>

4. 实现 ChatPage 页面

创建一个 ChatPage.vue 文件，代码如下（简化示例，实际应用中需加入聊天逻辑和消息展示）：

<template>
  <view>
    <text>聊天页面</text>
    <!-- 聊天消息的展示 -->
  </view>
</template>

<script>
export default {
  onl oad(options) {
    const chatId = options.id;
    // 根据 chatId 加载聊天消息
  },
};
</script>

5. 在 App.vue 或其他页面中使用 ChatList 组件

在 App.vue 或其他的页面中引用 ChatList 组件并传递聊天列表数据，例如：

<template>
  <view>
    <chat-list :chatList="chatList" />
  </view>
</template>

<script>
import ChatList from '@/components/ChatList.vue';

export default {
  components: {
    ChatList,
  },
  data() {
    return {
      chatList: [
        {
          id: 1,
          name: 'Alice',
          lastMessage: 'Hello!',
          timestamp: Date.now(),
          avatar: 'https://example.com/avatar1.png',
        },
        {
          id: 2,
          name: 'Bob',
          lastMessage: 'See you later.',
          timestamp: Date.now(),
          avatar: 'https://example.com/avatar2.png',
        },
      ],
    };
  },
};
</script>

<style>
/* 可以添加全局样式 */
</style>

说明

1. 数据展示: ChatList 组件接收一个聊天会话列表，通过 v-for 渲染每个聊天会话。
2. 导航功能: 点击聊天会话会调用 goToChat 方法，跳转到聊天详细页面。
3. 时间格式化: 提供了一个简单的时间格式化方法 formatTimestamp，你可以根据需求扩展更复杂的时间格式。

标签：
来源：