前端 - vue加载最新的数据以及向上滚动加载历史更多数据？

Question

在聊天发送信息

data: {    return {        form: {          page: 0        },    }} /** 加载最新的数据以及向上滚动加载历史更多数据**/  async getChatDataOlds() {        this.isLoadingMore = true;        const res = await getChatDataOld(this.form.id, this.form.page)        if (res && res.length > 0) {          let list = res.reverse();          list = list.concat(this.messagescontent);          this.messagescontent = list;          this.form.page = this.messagescontent[0].id;          this.splitArrayByTimestampDiff(this.messagescontent);          // 加载新消息后稍微向下滚动一点            this.$nextTick(() => {            const scrollPositionBefore = this.$refs.messagesContainer.scrollTop;            const newScrollHeight = this.$refs.messagesContainer.scrollHeight;            let scrollToPosition = scrollPositionBefore + Math.min(400, newScrollHeight - scrollPositionBefore - this.$refs.messagesContainer.clientHeight);            if (scrollToPosition < newScrollHeight) {              this.$refs.messagesContainer.scrollTop = scrollToPosition;            }          });        } else {          this.hasMore = false;        }        this.isLoadingMore = false;      },/** 点击切换用户 **/handleBgColor(val, item) {  this.inputMessage = ""  this.leftList[val].unreadNumber = 0;  this.userName = item.trueName  this.highlightedIndex = val  this.form.userId = 'PC_' + item.userId  this.form.id = item.userReceiveId  this.form.chatType = item.chatType  this.form.page = 0  this.messagescontent = []  if (this.form.id) {    this.getChatDataOlds()  }},/** 向上滚动加载**/handleScroll() {  const scrollPosition = this.$refs.messagesContainer.scrollTop;  if (scrollPosition < 50 && this.hasMore && !this.isLoadingMore) {    // this.getChatDataOlds(this.form.id, this.form.page);    this.getChatDataOlds();  }},

this.form.id是对方的聊天用户id,this.form.page初始化为0，是拿到getChatDataOld最新的数据，在这些代码中向上加载拿到this.messagescontent[0].id下标第一次的id加载更多历史数据，现在遇到的问题是第一次点击切换用户，往上加载更多历史数据没有问题，当切换用户再切换回来，向上滚动不会再加载历史更多数据了，大佬们，怎么处理这个呢

Answer 1

问题出现在当你切换用户时，你重置了this.form.page为0，并且清空了this.messagescontent数组。当再次切换回同一个用户时，因为this.form.page是0，并且this.messagescontent是空的，程序认为没有更多历史数据需要加载，因此不再调用getChatDataOlds函数加载更多数据。

要解决这个问题，你需要保存每个用户的最后加载的page值。一种方法是在data中为每个用户维护一个page值，或者使用Vuex（如果你正在使用Vuex管理状态）或其他状态管理库来存储这个值。

以下是一个简化的例子，展示了如何在组件的data中为每个用户维护一个page值：

data() {  return {    form: {      userId: '',      id: '',      page: 0,      chatType: ''    },    messagescontent: [],    hasMore: true,    isLoadingMore: false,    userPages: {} // 用于存储每个用户的page值  };},methods: {  async getChatDataOlds() {    // ... 省略其他代码 ...    if (res && res.length > 0) {      // ... 省略其他代码 ...      // 更新用户的page值      this.userPages[this.form.id] = this.messagescontent[0].id;      // ... 省略其他代码 ...    }    // ... 省略其他代码 ...  },  handleBgColor(val, item) {    // ... 省略其他代码 ...    // 设置当前用户的page值为之前保存的page值（如果有的话）    this.form.page = this.userPages[item.userReceiveId] || 0;    // ... 省略其他代码 ...  },  // ... 省略其他方法 ...}

在handleBgColor方法中，当你切换用户时，你检查this.userPages对象中是否有为这个用户保存的page值。如果有，就使用这个值作为新的this.form.page；如果没有，就使用默认值0。

这样，当你切换回之前的用户时，this.form.page会是你之前为该用户保存的page值，因此当向上滚动时，会正确地加载更多历史数据。

确保在适当的时候（比如组件销毁时）清理this.userPages对象，以避免内存泄漏。如果用户在多个会话或窗口中打开应用，并且你需要在这些会话间共享状态，你可能需要考虑使用本地存储（如localStorage）或其他持久化方法。