How to achieve a scrolling loading effect similar to WeChat chat records in Vue?

Vue.js simulates the scrolling loading effect of WeChat chat history

This article demonstrates how to achieve a scrolling loading effect similar to WeChat chat records in Vue.js application. When the user scrolls to the top, more chat history is loaded and the scrollbar is in its current position rather than back to the top.

The following code provides a complete implementation solution:

<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 { ref, onMounted, nextTick } from 'vue';

export default {
  setup() {
    const msgs = ref([...generateNumbers(1, 200)]); // 初始数据
    const chatListRef = ref(null);

    const generateNumbers = (start, end) => {
      // 生成数字序列，此处可替换为实际数据加载逻辑
      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); // 加载更多数据
        msgs.value = [...newMsgs, ...msgs.value]; // 将新数据添加到数组头部
        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>

The key to the code lies in the handleScroll function: it listens for scroll events, and when the scrollbar reaches the top ( container.scrollTop === 0 ), it loads new data, and uses nextTick to ensure that after the DOM is updated, the scrollbar position is recalculated, thus keeping the scrollbar in its original position. The generateNumbers function is a placeholder that needs to be replaced with your actual data loading logic (e.g., fetching data from the API). scrollToBottom function scrolls the scrollbar to the bottom after the component is mounted.

This improved version is more concise and uses the onMounted lifecycle hook function to initialize the scrollbar position, improving the readability and maintainability of the code. Remember to replace the generateNumbers function for your actual data acquisition method.

The above is the detailed content of How to achieve a scrolling loading effect similar to WeChat chat records in Vue?. For more information, please follow other related articles on the PHP Chinese website!