vue中模拟微信聊天时聊天列表溢出时自动上滑

在 Vue 中模拟微信聊天时，可以通过监听聊天列表的滚动事件来实现聊天列表溢出时自动上滑的效果。具体实现方法如下：

1. 给聊天列表添加一个 ref ，例如：

<template>
  <div class="chat-list" ref="chatList">
    <!-- 聊天内容 -->
  </div>
</template>

2. 在 mounted 钩子函数中监听聊天列表的滚动事件：

mounted() {
  this.$refs.chatList.addEventListener('scroll', this.handleChatListScroll)
},

3. 实现 handleChatListScroll 方法，该方法判断聊天列表是否已经滚动到底部，如果没有滚动到底部则自动滑动到底部：

methods: {
  handleChatListScroll() {
    const chatList = this.$refs.chatList
    const isScrolledToBottom = chatList.scrollHeight - chatList.scrollTop === chatList.clientHeight
    if (!isScrolledToBottom) {
      chatList.scrollTop = chatList.scrollHeight - chatList.clientHeight
    }
  }
}

这样，当聊天列表溢出时，就会自动滚动到底部，实现了类似微信聊天的效果。