javascript - VueJS - 如何在数据更改时滚动到底部

Question

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

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

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

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

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

我的技巧:

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

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

Answer 1

您可以使用 updated 生命周期钩子(Hook)在 DOM 更新后做一些事情。看看 official documentation .

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

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