如何在Vue中實現類似微信聊天記錄的滾動效果？

<div id="app">   <div class="container" ref="chatListRef" @scroll="handleScroll">     <ul>       <li v-for="item in msgs" :key="item">{{ item }}</li>     </ul>   </div> </div>

<script> import { createApp, ref, onMounted, nextTick } from 'vue';  const app = createApp({   setup() {     const msgs = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); //初始消息     const chatListRef = ref(null);     let loading = ref(false); // 添加loading狀態      const loadMoreMessages = async () => {       if (loading.value) return; // 防止重復加載       loading.value = true;       try {         // 模擬加載更多消息         const newMessages = Array.from({ length: 10 }, (_, i) => msgs.value.length + i + 1);         msgs.value.unshift(...newMessages); // 將新消息添加到頂部       } finally {         loading.value = false;       }     };      const handleScroll = async (event) => {       const target = event.target;       if (target.scrollTop <= 0 && !loading.value) {         await loadMoreMessages();         await nextTick(); // 等待dom更新         target.scrollTop += 100; // 調整滾動條位置，避免跳到頂部       }     };      onMounted(() => {       // 初始滾動到底部       nextTick(() => {         chatListRef.value.scrollTop = chatListRef.value.scrollHeight;       });     });      return { msgs, chatListRef, handleScroll };   }, });  app.mount('#app'); </script>  <style scoped> * {   margin: 0;   padding: 0; } html, body {   height: 100vh;   background-color: #e9f5f8; } .container {   width: 200px;   height: 500px;   overflow-y: auto;   background-color: #FFF; } </style>