vue中 模拟微信聊天时聊天列表老数据自动上滑不溢出的代码

在Vue中模拟微信聊天时，可以使用以下代码实现聊天列表的自动上滑并且不能溢出：

<template>
  <div class="chat-window">
    <div class="chat-list" ref="chatList" @scroll="handleScroll">
      <!-- 聊天记录列表 -->
    </div>
    <div class="chat-input">
      <!-- 输入框 -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatWindow',
  methods: {
    handleScroll() {
      const chatList = this.$refs.chatList;
      const scrollTop = chatList.scrollTop;
      const scrollHeight = chatList.scrollHeight;
      const clientHeight = chatList.clientHeight;

      if (scrollTop === 0) {
        // 聊天列表滚动到了顶部，需要加载更多聊天记录
        // TODO: 加载更多聊天记录

        // 滚动到之前的位置，避免列表跳动
        chatList.scrollTop = chatList.scrollHeight - scrollHeight;
      } else if (scrollTop + clientHeight >= scrollHeight) {
        // 聊天列表滚动到了底部，需要将列表自动上滑
        chatList.scrollTop = chatList.scrollHeight - clientHeight;
      }
    },
  },
};
</script>

<style scoped>
.chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}
</style>

在上面的代码中，我们使用了 `ref` 属性来获取聊天列表的 DOM 元素，并监听了 `scroll` 事件来判断聊天列表是否滚动到了顶部或者底部。如果聊天列表滚动到了顶部，就需要加载更多聊天记录；如果聊天列表滚动到了底部，就需要将列表自动上滑，避免列表溢出。