vue3 消息列表滚动到最底部自动向上
时间: 2023-09-22 14:05:11 浏览: 152
在 Vue 3 中,你可以在 `mounted` 钩子函数中使用 `ref` 获取消息列表容器的 DOM 元素,并在 `updated` 钩子函数中监听消息列表的变化,当有新消息时将容器滚动到底部。
以下是示例代码:
```html
<template>
<div class="message-list" ref="messageList">
<!-- 消息列表内容 -->
</div>
</template>
<script>
import { ref, onMounted, onUpdated } from 'vue';
export default {
setup() {
const messageList = ref(null);
onMounted(() => {
messageList.value.scrollTop = messageList.value.scrollHeight;
});
onUpdated(() => {
messageList.value.scrollTop = messageList.value.scrollHeight;
});
return { messageList };
},
};
</script>
```
在上面的代码中,我们使用 `ref` 创建了一个名为 `messageList` 的响应式引用,然后在 `onMounted` 钩子函数中获取到了消息列表容器的 DOM 元素,并将其滚动到底部。在 `onUpdated` 钩子函数中,我们监听了消息列表的变化,当有新消息时,将容器滚动到底部。最后,我们将 `messageList` 引用返回给模板使用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)