vue.js? wechat ?? ??? ??? ?? ??? ????????.

? ????? vue.js ?? ????? WeChat ?? ???? ??? ????? ??? ???? ??? ?????. ???? ???? ????? ? ?? ?? ??????? ??? ?? ???? ?? ????? ?? ??? ????.

?? ??? ??? ?? ???? ?????.

<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)]); // 初始數(shù)據(jù)
    const chatListRef = ref(null);

    const generateNumbers = (start, end) => {
      // 生成數(shù)字序列，此處可替換為實際數(shù)據(jù)加載邏輯
      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); // 加載更多數(shù)據(jù)
        msgs.value = [...newMsgs, ...msgs.value]; // 將新數(shù)據(jù)添加到數(shù)組頭部
        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 ) nextTick ???? DOM? ???? ? ? ???? ??? ?? ??? ????????. generateNumbers ??? ?? ????? ?? (? : API? ??? ??)?? ?? ???? ?? ?? ????. scrollToBottom ??? ?? ??? ?? ? ? ??? ?? ???? ??????.

? ?? ? ??? ? ???? onMounted Lifecycle Hook ??? ???? ??? ? ??? ????? ??? ???? ?? ??? ??????. ?? ??? ?? ??? ?? generateNumbers ??? ???????.

? ??? VUE? WeChat ?? ???? ??? ????? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!