vue.js客服系统实时聊天项目开发（十五）实现聊天界面滚动到底部

在进入在线聊天界面以后，不管是历史消息，还是实时消息，都需要让最新消息展示出来。因此需要把聊天界面滚动到最底部

 

 

            //滚动到底部
            scrollBottom:function(){
                var _this=this;
                this.$nextTick(function(){
                    var container = _this.$el.querySelector(".chatBox");
                    container.scrollTop = 999999999;
                });
            },

该代码使用了 Vue.js 的生命周期钩子 $nextTick，这是一个异步函数，它会在下一次 DOM 更新循环结束之后执行，保证了在该钩子内执行的代码，元素已经更新完毕。

通过使用 querySelector 方法，该代码获取了 class 为 chatBox 的 DOM 元素，并将该元素的 scrollTop 属性设置为一个较大的数值，使得滚动条滚动到了页面的底部。

唯一在线客服系统

https://gofly.v1kf.com