gpt4 book ai didi

javascript - axios响应后scrollTop不起作用

转载 作者:行者123 更新时间:2023-11-28 03:57:09 26 4
gpt4 key购买 nike

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

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

最佳答案

我认为您需要将 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;
}
)
})
}

关于javascript - axios响应后scrollTop不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47478772/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com