前端 - vue聊天框向上滚动加载更多数据的问题？

Question

代码如下html结构

<div class="chat-messages" ref="messagesContainer" @scroll="handleScroll">      <div class="message" v-for="(item, index) in list" :key="index">      </div></div>

js代码

    form: {      page: 0    },    scrollToBottom() {        this.$nextTick(() => {          this.$refs.messagesContainer.scrollTop = this.$refs.messagesContainer.scrollHeight;        });        },    async getChatDataOlds() {      if (this.form.id) {        this.isLoading = true;        const res = await getChatDataOld(this.form.id, this.form.page)        this.form.page = res[0].id;        this.messagescontent = this.messagescontent.concat(res);        let reversedArr = res.reverse();        this.messagescontent = reversedArr        this.splitArrayByTimestampDiff(this.messagescontent)        this.isLoading = false;      }    },

/applet/user/massage/getChatDataOld/179/0

vue聊天框向上滚动加载更多， res[0].id 数组第一条id， this.form.page是默认是0，后台说向上滚动条加载要拿数组的第一个id放到接口上，全部加载出来，现在上面的逻辑上这样是有问题的，往上滚动了会加载一些，往下滚动了下面的数据不见了，不是 我想要的，我想要的全部加载完，接口的格式是上面的截图，/applet/user/massage/getChatDataOld/179/0 这是接口，这个0是id,点击触发接口会展示最新的数据，大佬们这些要如何修改呢

Answer 1

为了实现Vue聊天框向上滚动加载更多数据的功能，你需要调整现有的逻辑以处理向上滚动的事件，并在加载新数据时维护完整的消息列表。以下是一种可能的解决方案：

1. 检测向上滚动事件：在handleScroll方法中，你需要检测聊天框是否滚动到了顶部。如果是，那么你可以加载更早的消息。
2. 维护完整的消息列表：不应该在每次加载新消息时替换整个messagescontent数组，而是应该追加新消息到现有消息列表。
3. 调整分页逻辑：当你向上滚动到顶部并准备加载更多消息时，你需要将当前列表中最旧的消息的ID作为参数传递给后端API。

以下是修改后的代码示例：

<template>  <div class="chat-messages" ref="messagesContainer" @scroll="handleScroll">    <div class="message" v-for="(item, index) in messagescontent" :key="index">      <!-- 渲染消息内容 -->    </div>  </div></template><script>export default {  data() {    return {      messagescontent: [], // 用于存储完整消息列表      form: {        page: 0, // 用于存储当前页面的ID      },      isLoading: false, // 用于指示是否正在加载数据    };  },  methods: {    async getChatDataOlds() {      if (this.form.id) {        this.isLoading = true;        const res = await getChatDataOld(this.form.id, this.form.page);        if (res.length > 0) {          // 将新消息追加到现有消息列表的开头          this.messagescontent = res.concat(this.messagescontent);          // 更新页面ID为最新消息的ID          this.form.page = res[res.length - 1].id;          this.splitArrayByTimestampDiff(this.messagescontent);        }        this.isLoading = false;      }    },    handleScroll() {      const messagesContainer = this.$refs.messagesContainer;      // 检测是否滚动到了顶部      if (messagesContainer.scrollTop <= 0) {        // 加载更早的消息        this.getChatDataOlds();      }    },    // 其他方法...  },  // 其他选项...};</script>

在这个修改后的版本中，getChatDataOlds方法会追加新消息到messagescontent数组的开头，而不是替换整个数组。handleScroll方法会检测是否滚动到了顶部，如果是，则调用getChatDataOlds方法加载更早的消息。

请注意，你需要确保后端API能够处理以最早的消息ID作为参数的情况，并返回相应的消息列表。此外，你可能还需要在UI方面进行一些调整，以确保新加载的消息能够正确地显示在聊天框中。