Vue聊天框默认滚动到底部

Vue聊天框默认滚动到底部

1.功能场景

在开发中，我们总能遇到某些场景需要运用到聊天框，比如客服对话。如果你不是一名开发人员，可能你在使用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的高度，那么久实现滚动条定位在底部了。