前端写一个类似于微信聊天记录中好友发送的文件,展示在页面上的功能

你可以通过前端技术实现类似微信聊天记录中好友发送文件并展示在页面上的功能。以下是一种可能的实现方式：

1. HTML 结构：

<div id="chat-container">
  <ul id="chat-messages"></ul>
</div>

2. CSS 样式：

#chat-container {
  width: 100%;
  height: 400px;
  overflow-y: scroll;
}

#chat-messages {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.message {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.message .sender {
  font-weight: bold;
  margin-right: 5px;
}

.message .file {
  background-color: #e6e6e6;
  padding: 10px;
  border-radius: 5px;
}

3. JavaScript 功能实现：

// 模拟聊天记录数据
const chatData = [
  {
    sender: '好友A',
    message: '文件发送',
    fileUrl: 'https://example.com/file1.pdf'
  },
  {
    sender: '好友B',
    message: '文件发送',
    fileUrl: 'https://example.com/file2.jpg'
  },
  // 其他聊天记录
];

// 获取聊天容器和消息列表元素
const chatContainer = document.getElementById('chat-container');
const chatMessages = document.getElementById('chat-messages');

// 循环遍历聊天记录数据并创建消息元素
chatData.forEach((messageData) => {
  const messageElement = document.createElement('li');
  messageElement.classList.add('message');

  const senderElement = document.createElement('span');
  senderElement.classList.add('sender');
  senderElement.textContent = messageData.sender;

  const fileElement = document.createElement('a');
  fileElement.classList.add('file');
  fileElement.href = messageData.fileUrl;
  fileElement.target = '_blank';
  fileElement.textContent = messageData.message;

  messageElement.appendChild(senderElement);
  messageElement.appendChild(fileElement);

  chatMessages.appendChild(messageElement);
});

// 滚动到最新消息
chatContainer.scrollTop = chatContainer.scrollHeight;

通过以上代码，你可以在页面上展示类似微信聊天记录中好友发送的文件。你只需要将聊天记录数据替换为实际数据，并将文件的 URL 链接传入 `fileUrl` 属性即可。注意在 CSS 中进行样式调整以适应你的需求。