Bagaimana untuk mencapai kesan pemuatan menatal yang serupa dengan rekod sembang WeChat di Vue?

Vue.js mensimulasikan kesan pemuatan menatal sejarah sembang WeChat

Artikel ini menunjukkan bagaimana untuk mencapai kesan pemuatan menatal yang serupa dengan rekod sembang WeChat dalam aplikasi Vue.js. Apabila pengguna skrol ke bahagian atas, lebih banyak sejarah sembang dimuatkan dan bar skrol berada dalam kedudukan semasa dan bukannya kembali ke bahagian atas.

Kod berikut menyediakan penyelesaian pelaksanaan yang lengkap:

<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>

Kunci kepada kod terletak pada fungsi handleScroll : ia mendengarkan untuk peristiwa tatal, dan apabila bar skrol mencapai bahagian atas ( container.scrollTop === 0 ), ia memuatkan data baru, dan menggunakan nextTick untuk memastikan bahawa selepas DOM dikemas kini, kedudukan scrollbar dikira semula, dengan itu menyimpan scrollbar dalam kedudukan asalnya. Fungsi generateNumbers adalah pemegang tempat yang perlu digantikan dengan logik pemuatan data sebenar anda (mis., Mengambil data dari API). Fungsi scrollToBottom skrol bar skrol ke bahagian bawah selepas komponen dipasang.

Versi yang lebih baik ini lebih ringkas dan menggunakan fungsi cangkuk kitaran hayat onMounted untuk memulakan kedudukan scrollbar, meningkatkan kebolehbacaan dan pemeliharaan kod. Ingatlah untuk menggantikan fungsi generateNumbers untuk kaedah pengambilalihan data sebenar anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan pemuatan menatal yang serupa dengan rekod sembang WeChat di Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!