vue实现聊天栏定位到最底部(超简单、可直接复制使用)

原理

通过watch监听聊天内容的加载,一旦加载完成或者数据更新触发vue的数据监听时,就重新修改【滚动滑钮到滚动条顶部的距离=滚动条的高度】,从而实现定位到底部的效果。

实现

1、布局

新建一个div(聊天框,如下),给他一个id,一会要用到

vue实现聊天栏定位到最底部(超简单、可直接复制使用)_第1张图片

vue实现聊天栏定位到最底部(超简单、可直接复制使用)_第2张图片

 然后记得给这个div的y轴一个滚动条,如下:

.dlog_content{
  overflow-y: auto;
  overflow-x: hidden;
}

 2、JavaScript代码(核心)

这里的messnowList是我的消息储存集合,用于判断数据变化,这个可以根据你实际情况修改,通过id绑定刚才的聊天框div,然后修改实现定位底部

你可能感兴趣的:(vue,vue.js,javascript,前端)