axios响应后scrollTop不起作用

Posted 2023-02-22

【中文标题】axios响应后scrollTop不起作用

【英文标题】：scrollTop does not work after Axios response

【发布时间】：2018-05-08 19:02:25

【问题描述】：

我在使用 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;
        );
    

不起作用。我该如何解决？

【问题讨论】：

UPD：也许我对聊天的概念有误。因为在流行社交中发送消息后，我看不到任何滚动效果和其他效果。是否还有其他方法可以制作漂亮的消息列表和附加消息？

模板是什么样子的？

【参考方案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;
            
        )
    )