VUEのWeChatチャットレコードと同様のスクロール荷重効果を実現する方法は？

vue.jsは、WeChatチャット履歴のスクロール荷重効果をシミュレートします

この記事では、vue.jsアプリケーションのWechatチャットレコードと同様のスクロールロード効果を達成する方法を示します。ユーザーが上部にスクロールすると、より多くのチャット履歴が読み込まれ、スクロールバーは上部に戻るのではなく現在の位置にあります。

次のコードは、完全な実装ソリューションを提供します。

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

コードの鍵はhandleScroll関数にあります：スクロールイベントのために耳を傾け、スクロールバーが上部に到達すると（ container.scrollTop === 0 ）、新しいデータをロードし、DOMが更新された後、スクロールバーnextTick位置が再計算されるため、スクロールバーを元の位置に保ちます。 generateNumbers関数は、実際のデータ読み込みロジックに置き換える必要があるプレースホルダーです（たとえば、APIからデータの取得）。 scrollToBottom関数は、コンポーネントがマウントされた後、巻物棒を下にスクロールします。

この改善されたバージョンはより簡潔で、 onMountedライフサイクルフック機能を使用してスクロールバーの位置を初期化し、コードの読みやすさと保守性を向上させます。実際のデータ収集方法のgenerateNumbers関数を置き換えることを忘れないでください。

以上がVUEのWeChatチャットレコードと同様のスクロール荷重効果を実現する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。