在Vue中如何實(shí)現(xiàn)類似微信聊天記錄的滾動(dòng)加載效果？

<template>   <div id="app">     <div class="container" ref="chatListRef" @scroll="handleScroll">       <ul>         <li v-for="item in msgs" :key="item">{{ item }}</li>       </ul>     </div>   </div> </template>  <script> import { ref, onMounted, nextTick } from 'vue';  export default {   setup() {     const msgs = ref([...generateNumbers(1, 200)]); // 初始數(shù)據(jù)     const chatListRef = ref(null);      const generateNumbers = (start, end) => {       // 生成數(shù)字序列，此處可替換為實(shí)際數(shù)據(jù)加載邏輯       const numbers = [];       for (let i = start; i <= end; i++) {         numbers.push(i);       }       return numbers;     };      const scrollToBottom = async () => {       await nextTick(); // 確保dom更新完畢       chatListRef.value.scrollTop = chatListRef.value.scrollHeight;     };      const handleScroll = () => {       const container = chatListRef.value;       if (container.scrollTop === 0) {         const prevScrollHeight = container.scrollHeight;         const newMsgs = generateNumbers(msgs.value.length + 1, msgs.value.length + 100); // 加載更多數(shù)據(jù)         msgs.value = [...newMsgs, ...msgs.value]; // 將新數(shù)據(jù)添加到數(shù)組頭部         nextTick(() => {           container.scrollTop = container.scrollHeight - prevScrollHeight;         });       }     };      onMounted(() => {       scrollToBottom();     });      return { msgs, chatListRef, handleScroll };   }, }; </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>