Comment réaliser un effet de chargement de défilement similaire aux enregistrements de chat WeChat dans Vue?

Vue.js simule l'effet de chargement de défilement de l'historique du chat WeChat

Cet article montre comment réaliser un effet de chargement de défilement similaire aux enregistrements de chat WeChat dans l'application Vue.js. Lorsque l'utilisateur défile vers le haut, plus d'historique de chat sont chargés et la barre de défilement est dans sa position actuelle plutôt que de revenir en haut.

Le code suivant fournit une solution d'implémentation complète:

<template>
  <div id="app">
    <div class="container" ref="chatListRef">
      <ul>
        <li v-for="item in msgs" :key="item">{{ article }}</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>

La clé du code réside dans la fonction handleScroll : il écoute les événements de défilement, et lorsque la barre de défilement atteint le haut ( container.scrollTop === 0 ), il charge de nouvelles données et utilise nextTick pour garantir qu'après le DOM à jour, la position de la barre de défilement est recalculée, en gardant ainsi la barre de décrex dans sa position d'origine. La fonction generateNumbers est un espace réservé qui doit être remplacé par votre logique réelle de chargement de données (par exemple, récupérer les données de l'API). scrollToBottom fait défiler la barre de défilement vers le bas une fois le composant monté.

Cette version améliorée est plus concise et utilise la fonction de crochet de cycle de vie onMounted pour initialiser la position de la barre de défilement, améliorant la lisibilité et la maintenabilité du code. N'oubliez pas de remplacer la fonction generateNumbers pour votre méthode réelle d'acquisition de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!