vue实现数据驱动滚动条底部显示

最新推荐文章于 2024-03-27 15:54:30 发布

莫尔道嘎老范

最新推荐文章于 2024-03-27 15:54:30 发布

阅读量391

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44134588/article/details/119801878

版权

本文探讨了在Vue应用中如何实现实时数据更新，并解决数据更新后滚动条定位到最后一条数据的问题。作者通过设置定时器模拟后端数据更新，并在数据变化时触发滚动更新。然而，由于Vue的渲染延迟，导致滚动条停留在倒数第二条数据。解决方案是在`updated`钩子中处理滚动，同时提出当鼠标悬停在盒子上时采用鼠标滚动，鼠标离开时自动滚动至最新数据，以优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,需求:

使用socket连接后端,每次后端数据到来之后,前端视图将实时更新,使得始终展示最新的数据在这里插入图片描述

2,思路

数据更新时,触发逻辑通过ref传入盒子将其scrollTop设置为盒子高度:

 mounted() {
    setInterval(() => {
      this.setDate();
      this.boxScroll(this.$refs.logBox);
    }, 3000);
    // openWebsocket("ws:", this.dealLog, this.dealLog);
  },
  methods: {
    boxScroll(o) {
      o.scrollTop = o.scrollHeight;
    },
    setDate() {
      this.activities.push({
        content: "支持使用图标",
        timestamp: moment(new Date()).format("YYYY-MM-DD h-m-s"),
      });
    },
    }