1. 一开始在ChatBot.vue文件中增加监听函数,如果nowMessageList发生了变化,则动态修改滚动条到顶部的距离等于对话框<div id='dialogue'></div>的高度,但是发现 document.getElementById('dialogue').scrollTop 的值一直是0。
watch: {
nowMessageList: function() {
document.getElementById('dialogue').scrollTop = document.getElementById('dialogue').scrollHeight;
console.log(document.getElementById('dialogue').scrollTop);//0
}
}
2、document.getElementById('dialogue').scrollTop 值一直是0的原因是,页面没有指定DOCTYPE。但是vue文件中的 template 不是标准的 HTML 文件,指定 DOCTYPE 也不起作用,所以这里需要使用 document.body.scrollTop 。但又出现了新的问题,页面并没有定位到对话框底部,而是定位到倒数第二条消息。
页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement。
页面不具有 DTD(或者说没有指定了 DOCTYPE)时,使用 document.body。
watch: {
nowMessageList: function() {
document.body.scrollTop = document.body.scrollHeight;
console.log(document.body.scrollTop);//会发生改变,但总是定位到倒数第二条消息
}
}
3、由于 nowMessageList 数据改变之后,DOM 并没有立即发生变化,所以 document.body.scrollTop 还是上一次 DOM更新之后的值。
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用。
再次修改之后的代码如下,可以实现自动定位到对话页面的底部,但是还有一个小问题,就是输入新的对话信息之后会出现闪屏的现象,可以通过设置延时来解决。
watch: {
nowMessageList: function() {
this.$nextTick(() => {
document.body.scrollTop = document.body.scrollHeight;
console.log(document.body.scrollTop);
});
}
}