VueJS - 如何在数据更改时滚动底部答案

【问题标题】：VueJS - How to scroll bottom when data changesVueJS - 如何在数据更改时滚动底部
【发布时间】：2023-04-06 13:16:01
【问题描述】：

在我的组件中，我有一个消息数组。

data: function () {
        return {
            messages: [],
            first_load: false
            ...
        }

在我的组件创建后，这个消息数组最初会被一个 Ajax 调用填充。数据来自服务器后，我只是将其推送到我的消息变量中，它会惊人地在 UI 中绘制所有消息，但在它被推送后，我尝试滚动 UI 底部，以便用户仅观看最新内容。

data.body.data.messages.map((message) => {
    this.messages.push(message)
}
this.scroll_bottom()

我注意到在推送我的数据后执行简单的 javascript 滚动底线将不起作用，因为 UI 会异步刷新（当我 .push 到我的数组时，它不会在同步 UI 之前执行下一行），所以我最终添加了一个超时然后滚动底部，但我认为这非常可耻。

我的秘诀：

watch: {
    messages:{
        handler: function (val, oldVal) {
            if (!this.first_load) {
                this.first_load = true
                setTimeout(() => {
                    this.scroll_bottom()
                }, 1000);
            }
        },
        deep: true
    }
}

关于如何利用它的任何想法？谢谢！

【问题讨论】：

我认为使用超时并没有那么糟糕。您可以清除现有的超时并在新数据到来时创建一个新的超时。您还可以使用去抖动功能来避免快速创建超时。
看看 Vue 生命周期钩子 vuejs.org/v2/guide/instance.html 你可以使用 'beforeUpdate' 和 'updated' 钩子来计时。
你试过 nextTick 吗？
这是您要找的吗？ stackoverflow.com/q/40730116/2813263
@nipunasudha 感谢您的评论，实际上是一个很好的想法。我刚刚阅读了“更新”方法，这就是我在理论上寻找的方法。我刚试过，效果很好，除了由于某种原因我对我的数据做了很多更改，所以它有一些问题，但理论上这就是答案，如果你想继续发布它。

标签： javascript vue.js vuejs2

【解决方案1】：

您可以在 DOM 更新后使用 updated 生命周期挂钩来执行某些操作。看看official documentation。

updated: function () {
    //scroll down logic here
}

如果你的updated逻辑被快速调用，你总是可以使用合适的谴责方法来减慢速度。

【讨论】：

【解决方案2】：

我认为 watch 是正确的方法，但请尝试使用 Vue.nextTick 或 this.$nextTick（仅迭代当前组件更新周期）而不是超时：

watch: {
    messages: function (val, oldVal) {
       // DOM not updated yet

       this.$nextTick(function () {
           // DOM updated

           this.first_load = true;
           this.scroll_bottom();
       });
    }
}

【讨论】：

【解决方案3】：

如果您的可滚动 div 的 id 是 cont，请使用以下方法滚动。

scroll() {
  document.getElementById('cont').scrollTop = document.getElementById('cont').scrollHeight;
}

而且你必须在updated hook 中调用它。

updated() {
  this.scroll();
}

【讨论】：

【解决方案4】：

在 v-for 之前在 div 中使用 v-chat-scroll

【讨论】：