Vue聊天框默认滚动到底部
功能场景
在开发中,我们总能遇到某些场景需要运用到聊天框,比如客服对话。如果你不是一名开发人员,可能你在使用QQ或者聊天工具的时候并没有注意到,当你发出一条消息的时候,窗体会默认滚动到最底部,让用户可以看到最新的聊天消息。
实现原理
通过每一次的数据变化,只要数据变化,将滚动的最大高度赋值给滚动条的最大高度。
scrollHeight
:滚动条高度
scrollTop
: 距离最顶部高度
实现过程
在vue中
<!-- 这是一个简易的范例,重点突出自动滚动底部 -->
<template>
<div>
<!-- 聊天窗体 -->
<div class="test" id="gundong"></div>
<!-- 输入窗体 -->
<el-input></el-input>
<!-- 确认按钮 -->
<el-button @click="take">发送</el-button>
</div>
</template>
<script>
export default {
name: 'scroll',
data () {
return {
chat: [
{info: '聊天内容,触发后push一个'}
]
}
},
methods:{
take () {
let info = {info: '聊天内容,触发后push一个'},
this.chat.push(info)
// 核心代码
// 滚动
this.$nextTick(() => {
let msg = document.getElementById('gundong') // 获取对象
msg.scrollTop = msg.scrollHeight // 滚动高度
})
}
}
}
</script>
<style scoped>
.test{
width:300px;
height: 300px;
overflow: auto;
}
</style>
核心内容
this.$nextTick(() => {
let msg = document.getElementById('gundong') // 获取对象
msg.scrollTop = msg.scrollHeight // 滚动高度
})
了解一下$nextTick
$nextTick
的执行条件是在DOM发生变化并且结束之后执行的一次回调。
vue在响应数据变化的时候并非在数据变化时DOM马上变化,而是按照一定的生命周期进行进程进行变化的。
如果你用watch
,你会发现,永远只能监听到最近的一条聊天记录之上。似乎监听不到数据变化。其实并不是,在watch
是直接监听data数据的变化情况,快于DOM,所以先行执行watch了。
那如果加上$nextTick
的话,就能够等到DOM变化完成之后再进行执行,有点类似timeout
。
了解一下“scrollTop”and“scrollHeight”
scrollTop
是滚动条的当前高度。默认是0
scrollHeight
是滚动条的整体高度
只要动态修改滚动条到顶部的距离等于div的高度,那么久实现滚动条定位在底部了。
文章首发:https://lianjy357.github.io/baymax/