最近一个项目设计到了类似于一个在线客服聊天室需求。
使用的vue做的，需要将滚动条一直处于最下方，也就是一直展示最新的消息。
开始使用的原生js操作DOM 使scrollTop=scrollHeight 发现没有效果。
后来发现scrolltop 一直比scrollHeight 少一条消息的高度。
说一下我聊天框实现的思路
聊天框遍历一个对象数组的内容 数组里也就是消息对象
每当websocket传过来一条新的消息我就把这个消息push到这个数组里面
vue就会动态遍历这个数组 构建DOM元素
初步判定 当我们往数组里push一条数据的时候 DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新
我们获取的还是没有push前的DOM元素 所以一直差一条消息的高度
后来采取了这种方式
_this.$nextTick(()=>{ _this.$refs.chatmain.scrollTop= _this.$refs.chatmain.scrollHeight })
这里介绍一下 $nextTick 的作用
DOM更新后的一个回调函数 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
也就是说我们在push后使用这个函数 他会等待DOM刷新后再去执行里面的代码 这样我们里面就会获取到最新的DOM 就不会差一个消息的高度
记得点赞关注哦！！！