在我的组件中,我得到了一个消息数组。

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

创建组件后,最初使用Ajax调用来填充此message数组。数据来自服务器后,我只是将其推送到我的messages变量中,它以惊人的方式绘制了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
    }
}

关于如何利用这一点的任何想法?
谢谢!

最佳答案

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

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

如果快速调用updated逻辑,则始终可以使用适当的去噪方法来减慢速度。

09-17 22:58
查看更多