提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

消息 系统 代码
2023-03-07 09:42:42 时间

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

            //滚动到底部
            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 属性设置为一个较大的数值，使得滚动条滚动到了页面的底部。

相关文章