javascript - axios响应后scrollTop不起作用

Question

我在使用 Laravel(使用 Vue.js、Pusher、Echo)构建实时聊天时遇到问题。 这里我有3种方法:

created() {
    this.fetchMessages();
    this.group = $('#group').data('group');
    Echo.private('chat.' + this.group)
        .listen('MessageSent', (e) => {
            this.messages.push({
                text: e.message.text,
                user: e.user,
                author: e.user.name,
                avatar: e.message.avatar
            });
        });
},

methods: {
    fetchMessages() {
        axios.get('/chat/check/' + this.group).then(response => {
            this.messages = response.data;

        });
    },

    addMessage(message) {
        axios.post('/chat/add', message).then(response => {
            this.messages.push(response.data);
        });

    }
}`

在这些方法之后，我需要滚动我的 <div id="chat">到底部。我尝试了很多选择，例如: document.getElementById('chat').scrollTop=9999

同样使用 jQuery $('#chat')... ,

一些插件，例如 vue-scroll-chat jQuery 也是如此，但它们都不起作用。此命令在方法 fetchMessages 中不起作用和addMessage 还有...

addMessage(message) {
        axios.post('/chat/add', message).then(response => {
            this.messages.push(response.data);
            document.getElementById('chat').scrollTop=9999;
        });
    }

不起作用。我该如何修复它？

Answer 1

我认为您需要将 document.getElementById('chat').scrollTop=9999; 添加到 Vue.$nextTick 以便信息有时间在滚动效果启动之前出现并影响元素。

您可能还想添加一个 ref="chat" 到您的聊天元素，以便您可以通过 vue 引用引用scrollTop；它看起来像这样

addMessage(message) {
    axios.post('/chat/add', message).then(response => {
        this.messages.push(response.data)
        this.$nextTick(
            () => {
                this.$refs.chat.scrollTop=9999;
            }
        )
    })
}