Wie kann man einen Ladeeffekt des Scrollens erzielen, der den WeChat -Chat -Datensätzen in Vue ähnelt?

Vue.js simuliert den Scrolling -Ladeeffekt des WeChat -Chat -Verlaufs

Dieser Artikel zeigt, wie ein Scrolling -Ladeeffekt ähnlich wie bei WeChat -Chat -Datensätzen in Vue.js -Anwendung ähnelt. Wenn der Benutzer nach oben scrollt, wird mehr Chat -Verlauf geladen und die Bildlaufleiste befindet sich in seiner aktuellen Position und nicht zurück nach oben.

Der folgende Code enthält eine vollständige Implementierungslösung:

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

Der Schlüssel zum Code liegt in der handleScroll -Funktion: Er hört auf Scroll -Ereignisse zu, und wenn die Bildlaufleiste die Oberseite erreicht ( container.scrollTop === 0 ), lädt sie neue Daten und verwendet nextTick , um sicherzustellen, dass nach der Aktualisierung der DOM die SCROLLBAR -Position neu kalkuliert wird, wodurch die ScrollBar in seiner ursprünglichen Position in seiner ursprünglichen Position bleibt. Die Funktion generateNumbers ist ein Platzhalter, der durch Ihre tatsächliche Datenladungslogik ersetzt werden muss (z. B. Daten aus der API abrufen). scrollToBottom -Funktion scrollt die Bildlaufleiste nach dem Montieren der Komponente nach unten.

Diese verbesserte Version ist prägnanter und verwendet die onMounted Lebenszyklus -Hakenfunktion, um die Bildlaufbuhlposition zu initialisieren und die Lesbarkeit und Wartbarkeit des Codes zu verbessern. Denken Sie daran, die Funktion generateNumbers für Ihre tatsächliche Datenerfassungsmethode zu ersetzen.

Das obige ist der detaillierte Inhalt vonWie kann man einen Ladeeffekt des Scrollens erzielen, der den WeChat -Chat -Datensätzen in Vue ähnelt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!