聊天——拉去历史记录，保持聊天页面静止

最新推荐文章于 2024-04-30 17:17:12 发布

可乐KL

最新推荐文章于 2024-04-30 17:17:12 发布

阅读量548

点赞数

分类专栏： vue 应用场景文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_49494051/article/details/129996835

版权

vue 同时被 2 个专栏收录

37 篇文章 1 订阅

订阅专栏

应用场景

2 篇文章 0 订阅

订阅专栏

// 第一次获取数据放在聊天页面中
   if (!this.message.length) {
        this.message = res.data.list // 聊天列表
        this.$nextTick(() => {
          const div = document.getElementById('messgaeContent')
          div.scrollTop = div.scrollHeight // 滚动到最下面
          this.scrollHeight = div.scrollTop // 记录上一次滚动的距离
        })
      } else {
        this.message.unshift(...(res.data.list)) // 在数组最前面放数据
        this.$nextTick(() => {
          const div = document.getElementById('messgaeContent')
          div.scrollTop = div.scrollHeight - this.scrollHeight - this.$refs.scrollRef.offsetHeight // 内容全文高 - 上一次滚动距离 - 本身内容高
        })
      }