通过vue.js的监听方法实现聊天室出现新消息时，滚动条自动滚动到底

　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);
      });
    }
  }
posted @ 2018-07-27 16:09  viczhang  阅读(5894)  评论(1)  编辑  收藏  举报