秋霞久久国产精品电影院,久久久久久久久久久,午夜精品久久久久久中宇

如何使用Vue 3實現類似微信聊天記錄的向上滾動加載功能？

vue 3實現微信式聊天記錄向上滾動加載：保持滾動位置

開發類似微信聊天記錄的應用時，需要在用戶向上滾動到頂部時加載更多歷史消息，同時保持滾動條位置不變。本文演示如何使用Vue 3實現此功能。

原始代碼結構及問題:

以下代碼展示了基本的向上滾動加載，但加載新消息后，滾動條會回到頂部：

<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 { createApp, ref, onMounted, nextTick } from 'vue';  const generateNumbers = (start, end) => {   // ... (same as before) ... };  const app = createApp({   setup() {     const msgs = ref(generateNumbers(1, 200));     const chatlistref = ref(null);      const scrollToBottom = async () => {       const chatListElement = chatlistref.value;       if (chatListElement) {         chatListElement.scrollTop = chatListElement.scrollHeight;       }     };      const handleScroll = (ev) => {       const target = ev.target;       if (target.scrollTop === 0) {         msgs.value.unshift(...generateNumbers(201, 400));         // 問題：此處加載新數據后，滾動條會回到頂部       }     };      onMounted(() => {       scrollToBottom();     });      return {       msgs,       chatlistref,       handleScroll     };   } });  app.mount('#app'); </script>  <style scoped> /* ... (same as before) ... */ </style>

改進后的handleScroll函數:

立即學習“前端免費學習筆記（深入）”；

為了解決滾動條回到頂部的問題，我們需要在加載新數據后，計算滾動條應該移動的距離，并將其設置回正確的位置。修改后的handleScroll函數如下：

const handleScroll = (ev) => {   const target = ev.target;   if (target.scrollTop === 0) {     const scrollHeightBefore = target.scrollHeight;     msgs.value.unshift(...generateNumbers(201, 400));     nextTick(() => {       const scrollHeightAfter = target.scrollHeight;       target.scrollTop = scrollHeightAfter - scrollHeightBefore;     });   } };

關鍵在于：