Question

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

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

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

关于如何利用这一点的任何想法？谢谢！

Answer 1

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

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

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

Answer 2

我认为监视是解决问题的正确方法，但是请尝试使用file system或Vue.nextTick（仅迭代当前组件更新周期）而不是超时：

this.$nextTick

Answer 3

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

Answer 4

如果可滚动div的ID为cont，请使用以下方法滚动。

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

您必须在updated挂钩中调用它。

updated() {
  this.scroll();
}

VueJS-如何在数据更改时向下滚动

4 个答案: