问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
摇摆123
    3516122
    广西南宁市

    代码如下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,点击触发接口会展示最新的数据，大佬们这些要如何修改呢

    前端element-uivue.js
    阅读 904
    avatarAI BotBETA

    为了实现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方面进行一些调整，以确保新加载的消息能够正确地显示在聊天框中。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题