uniapp:聊天消息列表（好友列表+私人单聊）支持App、H小程序

在uniapp中创建聊天消息列表，你可以使用<scroll-view>组件来实现滚动加载消息列表，以及使用<view>组件来展示每条消息。以下是一个简单的示例：

<template>
  <view>
    <scroll-view class="message-list" scroll-y="true" :scroll-into-view="toView" scroll-with-animation="true">
      <view v-for="(msg, index) in messages" :key="index" class="message-item" :id="'msg_' + msg.id">
        <view class="message-content">{{ msg.content }}</view>
        <view class="message-time">{{ msg.time }}</view>
      </view>
    </scroll-view>
    <view class="input-wrapper">
      <input type="text" placeholder="输入消息" v-model="inputValue" @confirm="sendMessage" />
      <button @click="sendMessage">发送</button>
    </view>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      messages: [], // 存储消息列表
      inputValue: '', // 输入的消息
      toView: '', // 要滚动到的元素的id
    };
  },
  methods: {
    // 发送消息的方法
    sendMessage() {
      if (this.inputValue) {
        const newMessage = {
          id: Date.now(),
          content: this.inputValue,
          time: new Date().toLocaleTimeString(),
        };
        this.messages.push(newMessage);
        this.inputValue = '';
        this.toView = `msg_${newMessage.id}`;
      }
    },
  },
};
</script>
 
<style>
.message-list {
  height: 500px; /* 设置合适的高度 */
}
.message-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.message-content {
  margin-bottom: 10px;
}
.input-wrapper {
  display: flex;
  align-items: center;
  padding: 10px;
}
input {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
}
button {
  padding: 10px 20px;
}
</style>

这个例子中，messages数组用于存储消息列表，每条消息包含内容content和时间time。输入框用于输入新消息，发送按钮用于触发发送消息的动作。使用scroll-into-view属性可以保证新消息被滚动到视图中。这个例子仅提供了基础的功能和样式，你可以根据自己的需求进一步扩展和优化。