vuejs动态添加数据,滚动条滚动到底部问题

背景

在使用vue动态添加数据时,和聊天的功能比较相似,想的是新来一条信息添加到聊天的底部,然后滚动条滚到底

原因

功能实现比较简单, 但是现在的问题是, 因为vue视图渲染和取DOM之间有一个时间差,导致取DOM的时候,元素还没有渲染出来,所以取到的scrollHeight不足

现象

每次来新数据,底部显示永远是倒数第二条,想看最后一条,需要滚动一下才行,这样显然不行

尝试解决

在滚动代码document.getElementById('myData').scrollTop = document.getElementById('myData').scrollHeight;加一个延迟,但是会出现别外一个问题,就是滚动条有跳跃

演示地址

http://runjs.cn/code/brhbnugd

最后:求解决方案,谢谢!

回答:

watch: {
    items() {
        document.getElementById('myData').scrollTop = document.getElementById('myData').scrollHeight;
    }
}

回答:

watch: {
    messages() {
      this.$nextTick(() => {
        let list = this.$els.xx
        list.scrollTop = list.scrollHeight
      })
    }
  }

回答:

watch 你的数据 绑定你的 scroll操作

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注