How to use Vue 3 to implement up scrolling loading function similar to WeChat chat records?

Vue 3 realizes the upward scrolling load of WeChat chat records: maintain the scrolling position

When developing an application similar to WeChat chat history, more historical messages need to be loaded as the user scrolls up to the top while keeping the scroll bar position unchanged. This article demonstrates how to implement this feature using Vue 3.

Original code structure and problems:

The following code shows the basic upward scrolling load, but once the new message is loaded, the scrollbar returns to the top:

<template>
  <div id="app">
    <div class="container" ref="chatlistref">
      <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>

Improved handleScroll function:

To solve the problem of scrollbar returning to the top, we need to calculate the distance the scrollbar should move after loading new data and set it back to the correct position. The modified handleScroll function is as follows:

 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;
    });
  }
};

The key is:

1. Record scrollHeight before adding new data.
2. Use nextTick to ensure that the DOM is updated, and then calculate the distance that the scrollbar needs to move ( scrollHeightAfter - scrollHeightBefore ).
3. Set scrollTop to the calculated distance to keep the scrollbar's relative position after loading new data.

With this improvement, the Vue 3 application can realize the upward scrolling loading function similar to WeChat chat records, and keep the scroll bar in the same relative position after loading more messages, providing a smoother user experience. Remember to add the necessary styles to your CSS to make sure the container has vertical scroll bars ( overflow-y: auto; ).

The above is the detailed content of How to use Vue 3 to implement up scrolling loading function similar to WeChat chat records?. For more information, please follow other related articles on the PHP Chinese website!