用vue3模拟微信聊天,显示头像及消息置底后自动上滑的功能代码
时间: 2024-03-31 14:33:42 浏览: 101
仿微信聊天界面demo
可以使用Vue3中的`ref`和`watch`来实现此功能。以下是一个简单的示例代码:
HTML模板:
```html
<template>
<div class="chat-box" ref="chatBox">
<div class="message" v-for="msg in messages" :key="msg.id">
<img :src="msg.avatar" alt="avatar">
<div class="content">{{ msg.content }}</div>
</div>
</div>
</template>
```
JavaScript代码:
```javascript
import { ref, watch } from 'vue';
export default {
setup() {
const messages = ref([]);
const chatBox = ref(null);
// 模拟添加消息到聊天记录
function addMessage(msg) {
messages.value.push(msg);
}
// 监听聊天记录的变化,自动滚动到底部
watch(messages, () => {
chatBox.value.scrollTop = chatBox.value.scrollHeight;
});
return {
messages,
chatBox,
addMessage
};
}
};
```
在`setup`函数中创建了一个`ref`对象`chatBox`来引用聊天框的DOM元素,同时创建了一个`watch`来监听`messages`数组的变化,当`messages`数组发生变化时,会自动将聊天框滚动到底部。在`addMessage`函数中模拟向聊天记录中添加消息的操作。在HTML模板中,使用`v-for`指令循环渲染聊天记录,并使用`ref`指令将`chatBox`对象绑定到聊天框的DOM元素上。
阅读全文