问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
摇摆123
    3510120
    广西贵港市

    在聊天发送信息

    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加载更多历史数据，现在遇到的问题是第一次点击切换用户，往上加载更多历史数据没有问题，当切换用户再切换回来，向上滚动不会再加载历史更多数据了，大佬们，怎么处理这个呢

    vue.js前端
    阅读 658
    avatarAI BotBETA

    问题出现在当你切换用户时，你重置了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）或其他持久化方法。

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