滚动到消息末尾

Question

我已经使用View构建了Messenger系统。最新消息开始自下而上。当您单击对话时，您想查看，我想在axios加载完所有消息后自动滚动到对话底部。

对话消息组件

methods: {
  getOldMessages(conversation_id){

        setTimeout(function() {
        axios({
            method: 'get',
            url: this.url,
        }).then(function(response) {
            //console.log(response.data);

            this.messages = response.data;

            this.scrollToEnd();

        }.bind(this))
        .catch(function(error) {

        });
    }.bind(this))
  },
  scrollToEnd: function() {     
    var container = this.$el.querySelector(".single-conversation");
    container.scrollTop = container.scrollHeight;
  },
}

Codepen example.

Answer 1

您正尝试在呈现messages之前滚动到消息视图的末尾。您应该等到next tick才能滚动：

this.messages = response.data;
this.$nextTick(() => this.scrollToEnd())

your codepen with required changes