在我的组件中,我得到了一个消息数组。
data: function () {
return {
messages: [],
first_load: false
...
}
创建组件后,最初使用Ajax调用来填充此message数组。数据来自服务器后,我只是将其推送到我的messages变量中,它以惊人的方式绘制了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
}
}
关于如何利用这一点的任何想法?
谢谢!
最佳答案
您可以使用updated
生命周期挂钩在DOM更新后执行某些操作。看看official documentation。
updated: function () {
//scroll down logic here
}
如果快速调用
updated
逻辑,则始终可以使用适当的去噪方法来减慢速度。